0

According to What are the differences between flex-basis and width?, flex-shrink is default to 1, which means a flex item's size might be changed.

Now I have a flex container with two children div.

The first one is with 'flex-basis: 200px;', this second one is with 'flex-basis: 100%;'

When I resize the container, the width for the first div is shrank.

<div class="flex-container">
    <div class="flex-item-1">div1</div>
    <div class="flex-item-2">div2</div>
</div>
.flex-container {
    display: flex;
}
.flex-item-1 {
    background: red;
    flex-basis: 200px;
}
.flex-item-2 {
    background: green;
    flex-basis: 100%;
}

Why the width of first one is changed since the second one is using a percentage value? I think browser should shrink the second one.

The question here is: what will happen if all flex items have either fixed width or percentage width, and sum of all fixed width is less than width of flex container?

Tim
  • 475
  • 3
  • 15
  • Flex-shrink and flex-grow have different initial values. Just because the flex item divs are shrunk proportionately if necessary to fit their container by default, doesn't mean that they will grow proportionately if necessary to fit. Set flex-shrink, flex-grow, flex-basis and flex-wrap to get whatever behaviour is most suitable. – Alohci Aug 10 '22 at 02:03
  • Or simply set flex with the 3 attributes – Davide Aug 10 '22 at 02:48

1 Answers1

0

I made a mistake in the first place. At first, I thought browser will sum up all fixed width and then give remaining space to other children.

But in fact, fixed width children and percentage width children sum up total width in the very beginning.

E.g. if the container is 600px, the div1 is 200px, and div2 will be 600px since it is 100%. So sum of div1 and div2 is 800px, which makes div1 get shrink.

Please see https://drafts.csswg.org/css-flexbox/#layout-algorithm for details

Tim
  • 475
  • 3
  • 15