flexbox - CSS flex column wrap inside flex row - Stack Overflow

admin管理员组

文章数量:1332890

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 ulm 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>

本文标签： flexboxCSS flex column wrap inside flex rowStack Overflow