children overflow despite flex-shrink being set

Question

Try lowering the width of the browser until the border for .cards hits the card the furthest to the right. Notice that that none of the cards shrink and stays inside, instead they overflow.

Why is that? I explicitly set the flex-shrink property to 3.

.cards {
  display: flex;
  align-content: center;
  border: 1px solid black;
  width: 80vw;
}
.card {
  flex-shrink: 3;
  flex-grow: 0;
  flex-basis: 0;
  height: 150px;
  width: 250px;
}
#karma-card {
  background: yellow;
}
#calculator-card {
  background: blue;
}
#supervisor-card {
  background: green;
}
#team-builder-card {
  background: red;
}

<div class="cards">
  <div id="supervisor-card" class="card">
    Supervisor
  </div>
  <div>
    <div id="team-builder-card" class="card">
      Team Builder
    </div>
    <div id="karma-card" class="card">
      Karma
    </div>
  </div>
  <div id="calculator-card" class="card">
    Calculator
  </div>
</div>

Bonus question: Now we're at it, for some reason, the align-content: center property doesn't work either. I expect the green and blue card to being centered vertically (because they have more space along the cross axis).

Edit on codepen

Can you please clarify `green, red and blue` should be fit within 80vw width? — mhhabib, Aug 22 '21 at 12:06

angel_dust · Answer 1 · 2021-08-22T13:56:04.030

1

In order to shrink, you need to set the initial value( flex-basis: 250px ) instead of specifying width property.

The reason your align-content is not working is align-content set the space between the multiple flex items.

As your flex-box has only one row of item( green and blue, note that red and yellow are not flex items), just use ( ailgn-items: center ) to center your green and blue.

edited Aug 22 '21 at 13:56

answered Aug 22 '21 at 13:12

angel_dust

121
2
10

Michael Benjamin · Answer 2 · 2021-08-22T13:37:21.053

A few things to note:

First, and most importantly, the red, blue and yellow cards are not flex items. Their container (div) does not have display: flex or display: inline-flex applied, so it's not a flex container. The children, therefore, exist in standard block layout and don't accept flex properties (i.e., flex-shrink is ignored and width: 250px is respected at all times).
Whether you have flex-shrink set to 3 or 1 or nothing (it defaults to 1) doesn't make any difference in this case.

This:

.card {
  flex-shrink: 3;
  flex-grow: 0;
  flex-basis: 0;
  height: 150px;
  width: 250px;
}

Can be reduced to this:

.card {
   flex: 0 3 250px;
   height: 150px;
 }

Lastly, with regard to your bonus question, start by addressing (1).

With regard to (1), learn more about the scope of flex properties here:

Proper use of flex properties when nesting flex containers

With regard to (2), learn more about flex-shrink here:

When does flex-grow switch to flex-shrink, and vice-versa?

With regard to (3), learn more about the flex property here:

https://www.w3.org/TR/css-flexbox-1/#propdef-flex

children overflow despite flex-shrink being set

2 Answers2