Question

如果我像这样设置嵌套的flexbox容器：

<div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2"></div>
    </div>
  </div>
</div>

...然后设置grow2的宽度，使其比container1 更宽，然后grow2溢出container1。

我认为这应该不，因为当flex元素大于flex容器时，它应该缩小。

如果我设置了grow2的 flex-basis ，那么这将按预期工作。

请参阅以下示例了解演示：

https://jsfiddle.net/chris00/ot1gjjtk/20/

请使用Chrome或Firefox

此外，我读到Flexbox规范说宽度和柔性基础应该具有相同的效果（当使用水平布局时），他们显然不会这样做。

现在我可以使用flex-basis而不是width，但是... Edge对flex-basis和width都做同样的事情，并且它在＆＃34;错误＆＃34;办法。 IE11也错了（虽然看起来有多个flexbox错误）。 请使用Edge查看演示。

那么这应该是怎么回事？

所有浏览器都有错误吗？

Flex-basis实际上应该与宽度不同（在简单的水平布局中）？

或者Edge是否正确，宽度和flex-basis都应该溢出父容器？

最后，是否有解决方法可以修复Edge（甚至是IE11）的溢出？

＆＃13;

.container1 {
  margin-top: 10px;
  display: flex;
  width: 200px;
  height: 50px;
  background-color: red;
}

.grow1 {
  flex-grow: 1;
  height: 40px;
  background-color: green;
}

.container2 {
  display: flex;
  height: 30px;
  background-color: yellow;
}

.grow2a {
  flex-grow: 1;
  flex-basis: 400px;
  height: 20px;
  background-color: turquoise;
}

.grow2b {
  flex-grow: 1;
  width: 400px;
  height: 20px;
  background-color: turquoise;
}

＆＃13;

<div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2a">Working (flex-basis)</div>
    </div>
  </div>
</div>

<div class="container1">
  <div class="grow1">
    <div class="container2">
      <div class="grow2b">Not working (width)</div>
    </div>
  </div>
</div>

＆＃13;

如何在嵌套容器中正确收缩flexbox项目？

0 个答案: