Shrink container to fit wrapped child elements

Question

I'm trying to figure out how flexbox works (should work?...) for a situation like this:

.holder {
  width: 500px;
  background: lightgray;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.v2 {
  width: 320px;
}
.child {
  display: inline-block;
  border: 1px solid black;
  padding: 30px 0px;
  text-align: center;
}

<div class="holder">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a glance</div>
  <div class="child">After coverage ends</div>
  <div class="child">Forms &amp; documents</div>
</div>
<br>
<br>
<div class="holder v2">
  <div class="child">At a
    <br>glance</div>
  <div class="child">After coverage
    <br>ends</div>
  <div class="child">Forms &amp;
    <br>documents</div>
</div>

Here is JSFiddle

The problem is that when there is enough space to hold the elements, I get a nice tight child with even spacing between the children. (first, top div block)

However, when there isn't enough space in the child and the text starts wrapping, it all goes in a weird direction - the children no longer fit snugly, and even after wrapping, there's still enough space around the flex child , because it doesn't fit anymore and the surrounding space doesn't actually have a chance to work (the second div block)

However, if I add manual line breaks where the automatic line breaks occur, everything is laid out the way it "should"... (bottom, third block)

What I want is to always have the children tightly within their box (black border) and whatever space is left will be evenly distributed between them without me adding manual line breaks (which is not an option) in my case)

is it possible? ...

Answer 1

Take a closer look at what I changed Fiddle:

• .holder width to max-width (in class .v)
• Modified .holder to wrap and space-around its children
• Added 2 more .v classes for clarity
• Deleted
of
• And, most importantly , add flex: 0 0 to .child

Flexbox almost always requires setting max-width, which is more flexible than width. Depending on how you want .children to behave, modify flex-grow and flex-shrink in flex: 0 0 to satisfy your needs. (The result of flex: 1 0 also looks good)

...No JavaScript required...

Codrops Flexbox ReferenceVery useful for understanding flexbox layout.

Answer 2

In CSS, the parent container does not know when its child containers wrap. So it continues to expand its size, ignoring what's going on internally.

In other words, the browser renders the container on the initial cascade. It does not reflow the document when the child wraps.

This is why containers don't shrink wrap narrower layouts. It just goes on as if nothing is wrapped, as evidenced by the reserved space on the right.

The maximum length of horizontal whitespace is the length of the elements the container expects to exist.

In the demo below, you can see the white space coming and going as the window is resized horizontally: DEMO 强>

You'll need a JavaScript solution (see here and here)...or CSS media queries ( See here).

When handling text wrapping, text-align: right on the container may be helpful in some cases.