【发布时间】：2019-11-16 20:19:00
【问题描述】：
当蓝色弹性项目的高度更大时，我正在尝试将红色弹性项目的内容高度设置为蓝色弹性项目的高度。
需要设置高度才能使滚动条起作用。如何将高度设置为与蓝色弹性项目相同？
我希望红色弹性项目的高度是页面的 100%。最接近我正在寻找的结果的方法是将红色弹性项目内的 div 的高度设置为 100vh。
当蓝色 flex-item 中的内容小于红色 flex-item 时，我得到了想要的结果，但是当蓝色 flex-item 中的内容更大时，就会出现问题。
显而易见的答案似乎是设置父类容器的高度，但它需要为 100%，这样蓝色的 flex-item 才能增长。
.container {
display: flex;
border: 1px solid gray;
}
.menu {
border: 1px solid red;
flex-grow: 1;
}
.menu-content {
width: 200px;
height: 100vh;
overflow-y: auto;
}
.content {
border: 1px solid blue;
align-self: flex-start;
height: 100%;
overflow: hidden;
}
【问题讨论】：