html - 如何使滚动 div 高度仅与行中的兄弟 div 一样大

Question

这可能只用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;
}

<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>
  </div>
</div>

标签： htmlcss

Answer 1

您应该#first用额外的包装器包装它并为其应用背景颜色。并使用height:0 min-height:100%技巧#first

我还修复了您的 html 错误。一个 ID 每页只能使用一次。所以我改变了#blockas.block

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

.scroll-area {
  overflow-y:auto;
  background-color: #00F;
}

#first {
  min-height: 100%;
  height: 0;
}

#second {
  background-color: #0F0;
  /* height: fit-content; // unnecessary */
  width: 200px;
}

.block {
  height: 40px;
  width: 40px;
  margin: 5px;
  background-color: #F00;
}

<div id="container">
  <div class="scroll-area">
    <div id="first">
      <div class="block">
      </div>
      <div class="block">
      </div>
      <div class="block">
      </div>
    </div>
  </div>
  <div id="second">
    <div class="block">
    </div>
    <div class="block">
    </div>
  </div>
</div>