如果同级溢出，则使子容器继承父容器的高度

Question

我创建了一个外部容器，其中至少有两个子容器。这2个容器之一（内部容器1）中的内容物会使其高度溢出。这样，外部容器也在增长。

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

如何使第二个容器长到外部容器的整个高度？

提示：我有点感觉根本不可能。

以下是代码段：

for

for (var i = 0; i < imagesList.length; i++) {
  let name = imagesList[i];
  name = name.substring(name.lastIndexOf('/') + 1);

  fetch(imagesList[i])
    .then(res => res.blob())
    .then(blob => {
      let file = new File([blob], name, blob);
      myDropzone1.addFile(file);
    });
}

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>