html - 当内部内容具有不同高度时，等高 flex 元素

Question

我需要具有相同高度的列，所以我使用了 flex(我使用 Bootstrap 框架)。

我知道在附图中可以看到 flex work，但是盒子的高度不一样，因为一个比另一个的文本少。

我希望 inner-div 类与 col-md-4 的高度相匹配。

谁能帮我调整高度，使它始终保持不变？

.col-md-4 {
  border: 1px solid black;
}
.row-eq-height {
  display: flex;
}
.inner-div {
  border: 1px solid red;
}

<div class="container">
  <div class="row row-eq-height">
    <div class="col-md-4">
      ddddddsadddddddsadddddddsadddddddsa
      <br>ddddddsadddddddsadddddddsadddddddsa
      <br>ddddddsadddddddsadddddddsadddddddsa
      <br>
      <div class="inner-div">
        adsadadadada
      </div>
    </div>
    <div class="col-md-4">
      ddddddsadddddddsadddddddsadddddddsa
      <div class="inner-div">
        asdadadaada
      </div>
    </div>
    <div class="col-md-4">
      ddddddsadddddddsadddddddsadddddddsa
      <br>ddddddsadddddddsadddddddsadddddddsa
      <br>ddddddsadddddddsadddddddsadddddddsa
      <br>
      <div class="inner-div">
        asdadaadas
      </div>
    </div>
  </div>
</div>

Answer 1

问题是 .inner-div 不是 flex 元素，所以它不接受 flex 属性。

Flex 布局仅适用于父子关系。 .row-eq-height 是一个 flex 容器，因为您已经给它 display: flex。这意味着 .col-md-4 是一个 flex 项，因为它是 .row-eq-height 的子元素。

查看您的图像(突出显示的部分)，您会发现 flex 等高列实际上在起作用。每个 .col-md-4 容器的高度相同。

但是，.col-md-4 的子项不是 flex 元素。它们是 block 中的普通元素，而不是 flex 格式化上下文。

解决方案是使 .col-md-4 成为一个 flex 容器，这样 flex 属性就可以应用于 .inner-div。

.row-eq-height {
  display: flex;
}
.col-md-4 {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}
.inner-div {
  flex: 1;
  border: 1px solid red;
}

<div class="row row-eq-height">
  <div class="col-md-4">
    ddddddsadddddddsadddddddsadddddddsa
    <br>ddddddsadddddddsadddddddsadddddddsa
    <br>ddddddsadddddddsadddddddsadddddddsa
    <br>
    <div class="inner-div">
      adsadadadada
    </div>
  </div>
  <div class="col-md-4">
    ddddddsadddddddsadddddddsadddddddsa
    <div class="inner-div">
      asdadadaada
    </div>
  </div>
  <div class="col-md-4">
    ddddddsadddddddsadddddddsadddddddsa
    <br>ddddddsadddddddsadddddddsadddddddsa
    <br>ddddddsadddddddsadddddddsadddddddsa
    <br>
    <div class="inner-div">
      asdadaadas
    </div>
  </div>
</div>