Categories
css flexbox html

Make container shrink-to-fit child elements as they wrap

72

I’m trying to figure out how flexbox works (supposed to work?…) for cases like below:

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

JSFiddle here

The problem is that when there’s enough space to fit elements, I’m getting a nice tight-fitted children, with even spacing between. (first, top div block)

However, when there’s no enough space and text inside children starts wrapping, it all kinda goes in a weird direction – children are not tightly fit anymore, and even though after wrapping, there’s enough space around flex children, because there are not properly fit anymore, space-around doesn’t really have a chance to work as well (second div block)

However still, IF I add manual line breaks at places where the automatic line breaks occur, everything gets laid out as it “should”… (bottom, third block)

What I’d like is to always have children tightly fitted within their boxes (black borders), and whatever space is left, would be distributed evenly between them, without me having to add manual line breaks (which is not an option in my case)

Is it possible at all?…

    63

    In CSS, the parent container doesn’t know when its children wrap. Hence, it continues scaling its size oblivious to what’s going on inside.

    Put another way, the browser renders the container on the initial cascade. It doesn’t reflow the document when a child wraps.

    That’s why the container doesn’t shrink-wrap the narrower layout. It just continues on as if nothing wrapped, as evidenced by the reserved space on the right.

    The maximum length of the horizontal white space is the length of the element(s) that the container was expecting to be there.

    In the following demo, whitespace can be seen coming and going as the window is re-sized horizontally: DEMO

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

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

    0

      7

      Have a good look at my Fiddle in which I changed:

      • .holder width to max-width (in .v classes)
      • modified .holder to wrap and space-around its children
      • added 2 more .v classes for clarity
      • removed the <br>'s
      • and, most importantly, added flex: 0 0 to .child

      Flexbox almost always needs max-width to be set, which is more flexible than width.
      Depending on how you need the .children to behave, modify the flex-grow and flex-shrink in flex: 0 0 to meet your needs. (the result of flex: 1 0 looks nice too)

      …no Javascript needed…

      UPDATE The Codrops Flexbox Reference really helped me a lot understanding FBL…

      3

      • 6

        May I ask what does “FBL” stand for? Abbreviations make things more confusing than they already are. I suspect it’s F for Flex and B for Box, but I can’t figure out the rest..

        – amn

        Jun 22, 2018 at 21:10


      • It stands for “Flexible Box Layout”. Late answer I know 🙂

        Jul 20, 2018 at 9:03

      • 1

        for anybody wondering, flex: 0 0; does not achieve OP’s requirements; it forces flex children to wrap their text even when there is enough space for it. Compare the top flex parent in the two fiddles, where there is ample horizontal space but every element’s text still wraps.

        Nov 3, 2021 at 20:26


      2

      The reason why your blocks behave like this is because of CSS rendering.

      In the first case in you fiddle the browsers doesn’t know when the block gets too small for it’s content. So it keeps stretching until it reaches the maximum and then renders the text.

      In your last case you tell the browser where to break so it knows that the element should not get wider.

      The only way you can easily solve this is by setting the breaks yourself.

      2

      • Thanks! I was afraid something like that might be happening… Still hoping some smart hacks exist, since it looks like a rather common situation…

        May 24, 2016 at 7:19

      • 1

        We had a similar issue at our work where we wanted an icon to float right next to the text: codepen.io/WartClaes/pen/grVQrz?editors=1100. Only we bumped also into the issue that the block always renders the full width nevertheless there was a lot of whitespacing.

        May 24, 2016 at 7:26