Html 如果垂直滚动条可见，则镀铬Flexbox项的高度错误

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

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

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

IE10、IE11和FF考虑了滚动条

这是你的电话号码

HTML:

---

有没有办法告诉Chrome尊重滚动条？

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

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

论subc-css规则

.subj > :nth-child(2)

加：

---

高度：计算（2em+3px）

适用于此示例。如果第n个孩子（2）的高度不同（例如动态），该怎么办？这不是一个解决方案。找到了另一个使chrome正确呈现内容的方法。

* {
  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;
}

.subj > :nth-child(2)

overflow:scroll;