无论内容如何都使 flexbox 收缩（可能 chrome 错误）

Question

我的基本布局如下所示：

#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 都有预期的行为。调整 window 大小时，所有 div 都会缩小，并且在第三个 div.

中会出现滚动条

这在 Chrome 中也运行良好，直到上次更新。现在第一个和第二个 div 按预期工作，但是第三个 div 没有完全收缩（因为它的内容）并且超出了底部的容器。

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

Answer 1

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

#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

无论内容如何都使 flexbox 收缩（可能 chrome 错误）

Making a flexbox shrink regardless of content (possible chrome bug)

css

google-chrome

overflow

flexbox