只用CSS可以实现吗?有两个兄弟元素。第二个元素的高度仅足以容纳其子元素(子元素可能会随着时间的推移而改变)。第一个元素应与第二个元素具有相同的高度。如果它的内容大于它的高度,那么它应该通过滚动溢出。
下面的代码片段与此不匹配,因为第一个元素占据了完全显示其内容所需的高度。
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
border-style: solid;
border-width: 1px;
border-color: #000;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: fit-content;
}
#first {
background-color: #00F;
overflow-y: scroll;
height: 100%;
}
#second {
background-color: #0F0;
height: fit-content;
width: 200px;
}
#block {
height: 40px;
width: 40px;
margin: 5px;
background-color: #F00;
}Run Code Online (Sandbox Code Playgroud)
<div id="container">
<div id="first">
<div id="block">
</div>
<div id="block">
</div>
<div id="block">
</div>
</div>
<div id="second">
<div id="block">
</div>
<div id="block">
</div> …Run Code Online (Sandbox Code Playgroud)