在flexbox中将内部div的高度调整到外部div的高度

Question

我需要具有相同高度的列，所以我使用flex（我使用bootstrap框架）。

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

我希望课程.sink.sparkpostmail.com与inner-div的高度匹配。

有人可以帮助我调整高度，使其始终相同吗？

col-md-4

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

Answer 1

问题是.inner-div不是弹性项目，因此它不接受弹性属性。

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

查看您的图像（突出显示的部分），您将看到弹性相等高度列实际上正在工作。每个.col-md-4容器的高度相同。

但是，.col-md-4的孩子不是弹性项目。它们是块中的常规元素，而不是flex，格式化上下文。

解决方案是使.col-md-4成为灵活容器，以便将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>

Answer 2

很简单。 如果要将内部div的高度设置为其父级的高度，请将inner-div设置为display：flex和flex-grow：1。它会占用父母的高度。 另外，您可以设置align-items：stretch到父div。这使得所有内部div都延伸到父级所拥有的内容。

希望它适合你。

Answer 3

我认为您正在寻找这样的解决方案：Schlomi

我将box-header的高度设置为calc(100% -24px)，24px是底部div的高度。

/* CSS used here will be applied after bootstrap.css */
.col-md-4 {
  border: 1px solid black;
  padding: 10px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.box-header{
  height: calc(100% - 24px);
  border: 1px solid green;
}    
.box-content {
    border: 1px solid red;
}