How to have 1 column in a flex box fill remaining space

Issue I have the following html: <div id="inner-container"> <div id="titles"> <div id="main-title">Main title here</div> <div id="page-title">Page title here</div> </div> <nav id="progress-container> <div id="page-counter">Page count here</div> <a id="link-to-page-1"></a> <a id="link-to-page-2"></a> <a id="link-to-page-3"></a> <a id="link-to-page-4"></a> <a id="link-to-page-5"></a> <a id="link-to-page-6"></a> </nav> </div> and

Continue reading

Flex not respecting margin

Issue I’m trying to add margins to a flex but it’s working only for a side. Margin stuck to the side of the page: @import url(‘https://fonts.googleapis.com/css2?family=Luxurious+Roman&display=swap’); * { font-family: ‘Luxurious Roman’, cursive; } body { margin: 0 0.5em 0 0.5em;

Continue reading

Fixed navbar without breaking flexbox

Issue Adding position: fixed; to the navbar breaks margin-left: auto; for the navbar menu icon: /* Resets */ :root { –pblack: #1E293B; –pyellow: #FFE934; –pwhite: white; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(–pblack);

Continue reading

Flexbox curved corners

Issue Is it possible to have the contents of a flexbox adapt to it’s border radius. For example: If we have a flexbox with border-radius: 10px when we reorder the elements inside the box is it possible to have the

Continue reading

How to use overflow with flex-grow

Issue I have this code: html, body, #container { width: 100%; height: 100%; } #container { display: flex; background: #ddd; } #width { width: 200px; height: 100%; resize: horizontal; overflow: hidden; background: #eee; } #remaining { flex-grow: 1; overflow: scroll;

Continue reading

How do I achieve equal-height menu list items?

Issue I tried using flex and still the items does not stretch maximum height of items. ul.sub-menu-nav { padding:0px; height:100%; -ms-box-orient: horizontal; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -moz-flex; display: -webkit-flex; display: flex; -webkit-align-items: stretch; align-items: stretch; flex-direction: row;

Continue reading