html - 如果垂直滚动条可见，Chrome 中的 Flexbox 元素高度错误

Question

似乎谷歌浏览器在首次呈现 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;