如果垂直滚动条可见，Chrome 中的 Flexbox 项目高度错误

Question

第一次渲染 Flexbox 容器时，Google Chrome 似乎没有考虑 Flex 项目的垂直滚动条。

这是刚加载页面后的样子：

这是稍微改变容器宽度后的样子。

IE10、IE11 和 FF 确实考虑了滚动条。

这里是codepen。

HTML：

<div class="subj">
  <div>
    Lorem ipsum dolor sit amet, ...
  </div>
  <div>
    Lorem ipsuxm dolor sit amet, ...
  </div>
  <div>
    Lorem ipsum dolor sit amet, ...
    Lorem ipsum dolor sit amet, ...
  </div>
</div>

CSS：

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.subj {
  width: 400px;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.subj > :nth-child(1) {
    background: #f88;
    flex: 0 0 auto;
}
.subj > :nth-child(2) {
    background: #8f8;
    flex: 0 0 auto;
    overflow: auto;
    white-space: nowrap;
    position: relative;
    border: 5px solid #f8f;
}
.subj > :nth-child(3) {
    background: #88f;
    flex: 1 1 auto;
    overflow: auto;
}

有没有办法让 Chrome 尊重滚动条？

Answer 1

不幸的是，我不知道是什么导致了这个问题。

但一个简单的解决方法是设置正确的高度。

关于主题 css 规则

.subj > :nth-child(2)

添加：

overflow:scroll;