Flex项目在Safari中无法正常生长

Question

在Chrome中，当在flex子项上设置flex: 1时，当它的内容变得比flex子项大时，flex子项就会增长。

然而，在Safari中不会发生这种情况。 在Safari中，它就像将table-layout: fixed放在table上一样。 我们如何在Safari中解除它？

＆＃13;

＆＃13;

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;
}

＆＃13;

<padre>
  <child>
  </child>
  <child>
    <under-child></under-child>
  </child>
</padre>

＆＃13;

＆＃13;

＆＃13;

The same in JsBin

请注意，示例中的任何固定尺寸仅供参考。实际上，由于我正在构建流畅的布局，我无法访问任何固定大小。

Answer 1

尝试从width: 150px;删除under-child，或在overflow: hidden;设置child。

所以容器是200px，每个孩子由于flex: 1;将是100px，额外的50px导致溢出，并且不知何故Safari无法调整它。

如果您需要将最后一个子div设置为150px宽，则可以在flex: 0 0 150px;上设置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>

作为替代解决方案，您可以使用CSS表实现布局。它可以很好地工作，而无需在child元素上设置任何固定宽度。

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>

修改

我可以确认您的原始示例在最新的Safari Technology Preview中运行得很好（与Firefox和Chrome中的结果相同），因此很可能是一个错误，并且已经在未来的稳定版本中得到修复。< / p>