无论内容如何都使 flexbox 缩小（可能的 chrome 错误）答案

【问题标题】：Making a flexbox shrink regardless of content (possible chrome bug)无论内容如何都使 flexbox 缩小（可能的 chrome 错误）
【发布时间】：2015-10-15 18:55:43
【问题描述】：

我有一个如下所示的基本布局：

#first {
    display: -webkit-box;
    -webkit-flex-flow: column;
    display: flex;
    flex-flow: column;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 500px;
    overflow: hidden;
    border-bottom: 3px solid red;
}

#second {
    display: -webkit-box;
    -webkit-box-flex: 1;
    -webkit-flex-flow: row;
    -webkit-box-align: stretch;
    display: flex;
    flex: 1;
    flex-flow: row;
    align-items: stretch;
    border: 1px dashed gray;
}

#third {
    display: -webkit-box;
    -webkit-flex-flow: row;
    -webkit-box-align: center;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 10px;
    width: 100px;
    overflow: scroll;
    border: 1px solid blue;
}

<div id="first">
    <div id="second">
      <div id="third">
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
      </div>
    </div>
</div>

JSFIDDLE

Safari、Firefox 和 Opera 都有预期的行为。调整窗口大小时，所有 div 都会缩小，并在第三个 div 中出现滚动条。

在上次更新之前，这在 Chrome 中也可以正常工作。现在第一个和第二个 div 可以按预期工作，但第三个 div 并没有完全缩小（因为它的内容）并且超出了其底部的容器。

我是不是发现了一个 Chrome 错误？或者是 Firefox、Opera 和 Safari 使用这种布局更灵活？如何强制第三个 div 缩小并尊重所有浏览器中的 overflow 属性？

【问题讨论】：

标签： css google-chrome overflow flexbox

【解决方案1】：

我通过在第二个 div 中添加 overflow: scroll 解决了这个问题：

#first {
    display: -webkit-box;
    -webkit-flex-flow: column;
    display: flex;
    flex-flow: column;
    position: fixed;
    top: 10px;
    left: 10px;
    bottom: 10px;
    width: 500px;
    overflow: hidden;
    border-bottom: 3px solid red;
}

#second {
    display: -webkit-box;
    -webkit-box-flex: 1;
    -webkit-flex-flow: row;
    -webkit-box-align: stretch;
    display: flex;
    flex: 1;
    flex-flow: row;
    align-items: stretch;
    overflow: scroll;
    border: 1px dashed gray;
}

#third {
    display: -webkit-box;
    -webkit-flex-flow: row;
    -webkit-box-align: center;
    display: flex;
    flex-flow: row;
    align-items: center;
    margin: 10px;
    width: 100px;
    overflow: scroll;
    border: 1px solid blue;
}

<div id="first">
    <div id="second">
      <div id="third">
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
          TEST<br/>
      </div>
    </div>
</div>

Updated JSFIDDLE

【讨论】：