html - 如果兄弟容器溢出，则使子容器继承父容器高度

Question

我创建了一个外部容器，其中至少有两个子容器。这 2 个容器之一(内部容器 1)的内容使其在其高度溢出。由此，外容器也在增长。

第二个内部容器继承了外部容器的高度，但它只是检索设置为某个值的外部容器的高度。

如何让第二个容器增长到外容器的全高？

提示:我觉得这根本不可能。

这里是一个片段:

* {
  box-sizing: border-box;
}

.padding {
  padding: 10px;
}

.outer-container {
  height: 400px;
  width: 100%;
  background-color: yellow;
  overflow-y: scroll;
}

.overflowing-container {
  width: 20%;
  display: inline-block;
  background-color: salmon;
  overflow-y: visible;
}

.inherit-height-container {
  height: inherit;
  width: 70%;
  display: inline-block;
  background-color: salmon;
  vertical-align: top;
}

.large-element {
  height: 250px;
  width: 100%;
  margin-top: 5px;
  background-color: lightsalmon;
}

<div class="outer-container padding">
  <div class="overflowing-container padding">
    <div class="large-element"></div>
    <div class="large-element"></div>
    <div class="large-element"></div>
  </div>
  <div class="inherit-height-container"></div>
</div>

Answer 1

如果你可以编辑你的 html，你可以只添加一个内部包装器并使其灵活:

* {
  box-sizing: border-box;
}

.padding {
  padding: 10px;
}

.outer-container {
  height: 400px;
  width: 100%;
  background-color: yellow;
  overflow-y: auto;
}

.inner-container {
  display: flex;
}

.overflowing-container {
  width: 20%;
  display: inline-block;
  background-color: salmon;
  margin-right: 5px;       /* not sure if you want this gap */
}

.inherit-height-container {
  /* remove height from this */
  width: 70%;
  display: inline-block;
  background-color: salmon;
  vertical-align: top;
}

.large-element {
  height: 250px;
  width: 100%;
  margin-top: 5px;
  background-color: lightsalmon;
}

<div class="outer-container padding">
  <div class="inner-container">
    <div class="overflowing-container padding">
      <div class="large-element"></div>
      <div class="large-element"></div>
      <div class="large-element"></div>
    </div>
    <div class="inherit-height-container"></div>
  </div>
</div>