1

I am studying flexbox, and just learned that flex item has a default setting of "flex: 0 1 auto". So I made a simple example to understand how this looks when implemented.

But when I shrink my browser, flex items don't shrink and it just overflows.

I thought flex-shrink is set to 1 even if I didn't specify flex property. What am I doing wrong here?

Thanks in advance!

.container {
  background-color: yellow;
  height: 200px;
  display: flex;
}

.child1 {
  background-color: white;
  margin: 10px;
}

.child2 {
  background-color: white;
  margin: 10px;
}
<div class="container">
  <div class="child1">11111111111111111</div>
  <div class="child2">2222222222222222222</div>
</div>
Gerard
  • 15,418
  • 5
  • 30
  • 52
bistromathics8
  • 75
  • 4
  • 1
    Your string is a long string with no spaces and you don't have word break styles so it won't wrap and will overflow to the outside of the container. Use spaces or lorem ipsum. This none shrinking behaviour is not related to flex shrink – Huangism May 22 '20 at 17:06
  • 1
    https://jsfiddle.net/huangism/d45tmq13/ your code with spaces – Huangism May 22 '20 at 17:13
  • 1
    You got everything right. `flex-shrink: 1` is a default setting. You just missed **the other default setting**: `min-width: auto`, which means that a flex item cannot be smaller than its content. You need to override that setting. Full explanation in the duplicate. https://jsfiddle.net/nqr8vah3/ – Michael Benjamin May 22 '20 at 17:27

0 Answers0