Flex: Wrapped children don't extend parent width

Question

I'm building a header with some links in the right. The number of links depend of the context so I can't use fixed width. How it should look:

How it currently looks:

I created a codepen to demonstrate it: https://codepen.io/Flaburgan/pen/eYeYaJY

So my header is a flex container, the title part is flex-grow: 1 while the links part should only be big enough to hold its content. The links part is also a flex container with direction column and wrap set to wrap-reverse. My problem is, the links part doesn't expand when its children are wrapping to the left, why is that?

<header>
  <section>
    <h1>Title</h1>
    <h2>Subtitle</h2>
  </section>
  <section>
    <a>1</a>
    <a>2</a>
    <a>3</a>
    <a>4</a>
  </section>
</header>

header {
  display: flex;
  background: yellow;
  height: 100px;
}
section:first-child {
  background: blue;
  flex-grow: 1;
}
section:last-child {
  background: chartreuse;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap-reverse;
}
a {
  text-align: center;
  width: 20px;
  height: 20px;
  padding: 5px;
  margin: 5px;
  border-radius: 50%;
  background: red;
}

EDIT (for future readers): This is a bug in flexbox implementation. A workaround is to use flex-direction: row; and writing-mode: vertical-lr; instead.

Flex: Wrapped children don't extend parent width

0 Answers0