小编Rya*_*ens的帖子

如何使滚动 div 高度仅与行中的同级 div 一样大

只用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)

html css

2
推荐指数
1
解决办法
1490
查看次数

标签 统计

css ×1

html ×1