CODEWITHSUNDEEP
cssflexbox
Daniel Birowsky Popeski
Daniel Birowsky Popeski

Reputation: 9266

Flex item does not grow properly in Safari

In Chrome, when set flex: 1 on a flex child, when it's content becomes larger than the flex child, the flex child grows.

However, that does not happen in Safari. In Safari, it behaves like putting table-layout: fixed on a table. How do we unfix it in Safari?

padre {
  display: flex;
  width: 200px;
  height: 100px;
}
child {
  flex: 1;
  background: green;
}
child:last-child {
  background: yellow;
}
under-child {
  display: block;
  height: 20px;
  width: 150px;
  background: red;
}
<padre>
  <child>
  </child>
  <child>
    <under-child></under-child>
  </child>
</padre>

The same in JsBin

enter image description here

Please note that any of the fixed sizes in the example are just for illustrational purpose. In reality, as I'm building fluid layouts, I don't have access to any fixed sizes.

Upvotes: 1

Views: 1329

Answers (1)

Stickers
Stickers

Reputation: 78676

Try removing width: 150px; from under-child, or set overflow: hidden; on child.

So the container is 200px, and each child would be 100px due to flex: 1;, the extra 50px causes the overflow, and somehow Safari couldn't adjust it.

If you need the last child div to be 150px wide, you can set flex: 0 0 150px; on child:last-child.

padre {
  display: flex;
  width: 200px;
  height: 100px;
}
child {
  background: green;
  flex: 1;
}
child:last-child {
  background: yellow;
  flex: 0 0 150px;
}
under-child {
  display: block;
  height: 20px;
  /* width: 150px; */
  background: red;
}
<padre>
  <child></child>
  <child>
    <under-child></under-child>
  </child>
</padre>

As an alternative solution, you can probably achieve the layout with CSS table. it works well without setting any fixed width on the child element.

padre {
  display: table;
  width: 200px;
  height: 100px;
}
child {
  background: green;
  display: table-cell;
}
child:last-child {
  background: yellow;
  width: 50%; /*this will be auto adjusted*/
}
under-child {
  display: block;
  height: 20px;
  width: 150px;
  background: red;
}
<padre>
  <child></child>
  <child>
    <under-child></under-child>
  </child>
</padre>

Edit:

I can confirm that your original example works just fine in latest Safari Technology Preview (same results as in Firefox and Chrome), so it is very likely a bug, and has been fixed already in a future stable release.

Upvotes: 1

Related Questions