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

Question

似乎Google Chrome首次展示Flexbox容器时未考虑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

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

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

在subj css规则

上

.subj > :nth-child(2)

添加：

overflow:scroll;