I have a between keyboard and chair issue with CSS flexbox when nesting two flexboxes.
The body
of my HTML document is a flexbox occupying exactly the viewport, so that main
can stretch to what header
does not take. The header includes a navigation, that I put into a wrapping flexbox.
Everything works as intended in the portrait setup with navigation on top (body
is flex-flow: column nowrap
and the ul
in header
is flex-flow: row wrap
).
However, in landscape design (body
is flex-flow: row nowrap
and ul
m flex-flow: column wrap
), the ul
overflow in x unless I manually set its width.
Here is a minimal code displaying the unintended behaviour under firefox 131.
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-flow: row nowrap;
width: 100vw;
height: 100vh;
}
main {
flex: 1 0;
}
/* Header overflows in x when flex ul wraps instead of adapting its width. Desired behaviour only if I set ul width manually. */
header {
background: DimGrey;
height: 100%;
overflow-x: scroll;
}
ul {
display: flex;
flex-flow: column wrap;
height: 100%;
}
li {
list-style: none;
padding: 2ex;
margin: .5ex;
background: white;
}
<header>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</header>
<main>
<h1>Flex column wrap inside flex row wrap</h1>
</main>