如何设置外部div的高度始终等于特定的内部div？

Question

我有一个外部div，其中包含三个内部div。我希望最左侧的内部div始终确定外部div的高度。如果其他内部div的内容少于最左边的div，则它们将具有空白空间。如果它们的内容[比最左边的div还要多]，它们将获得一个滚动条。关于SO的其他一些问题询问将外部div的高度设置为内部div 的高度。但是，在我的情况下，我有多个内部div，而外部div的高度不会大于或小于最左侧div的高度。有什么方法可以做到这一点，尤其是仅使用CSS？

Answer 1

不同的方式。两个例子：

.outer_div {

  position: relative;

  overflow: hidden;

  max-width: 300px;

  margin: 0 auto;

}

.inner_div {

  width: 33.33%;

}

.inner_div_1 {

  float: left;

  background: khaki;

}

.inner_div_2,

.inner_div_3 {

  background: darkkhaki;

  position: absolute;

  top: 0;

  height: 100%;

  overflow-y: auto;

}

.inner_div_2 {

  left: 33.33%;

}

.inner_div_3 {

  left: 66.66%;

}

<div class="outer_div">

  <div class="inner_div inner_div_1">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  </div>

  <div class="inner_div inner_div_2">

    Lorem ipsum.

  </div>

  <div class="inner_div inner_div_3">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </div>

</div>

.outer_div {

  display: flex;

  flex-direction: row;

  max-width: 300px;

  margin: 0 auto;

  background : gray;

}

.inner_div {

  width: 33.33%;

}

.inner_div > div {

  position: relative;

  height: 100%;

}

.inner_div_1 span {

  background: khaki;

}

.inner_div_2 span,

.inner_div_3 span {

  background: darkkhaki;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow-y: auto;

  overflow-x: hidden;

}

<div class="outer_div">

  <div class="inner_div inner_div_1">

    <span>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    </span>

  </div>

  <div class="inner_div inner_div_2">

    <div>

      <span>

        Lorem ipsum.

      </span>

    </div>

  </div>

  <div class="inner_div inner_div_3">

    <div>

      <span>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      </span>

    </div>

  </div>

</div>