使用 flexbox 的平行列高度问题答案

【问题标题】：Issue with parallel column height using flexbox使用 flexbox 的平行列高度问题
【发布时间】：2018-01-26 02:53:51
【问题描述】：

我有四个 div/列，其中包含不同数量的文本。使用 flexbox，我假设我可以将所有列的大小调整为最大的 div 大小，但是从包含的代码笔中，您应该看到所有列都以不同的高度出现。

我的最终目标是让它们都具有相同的高度，但在调整页面大小时它们应该一致地挤压和拉伸，在中间点，列将重新排列在 2 x 2 网格中，并且全部以移动大小div 一个在另一个之上。这部分按预期工作，但 4 个 div 的大小仍然不同。

HTML：

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<body>
<div class="table-layout">
  <div class="table-cell row">

    <div class="flexboxContainer">

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="panel panel-default summary-panel" style="background: green; color: white;">
          <div class="panel-body flexboxContent">

            <div  class="chartContainer">

              <div class="table-layout">
                <div class="table-cell row">
                  <h1>0</h1>
                  <span style="font-size: 14px">blah blah blah blah</span>
                </div>
                <div class="table-cell row">
                  <span style="font-size: 64px; opacity: 0.3"></span>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="panel panel-default summary-panel" style="background: green; color: white;">
          <div class="panel-body flexboxContent">

            <div class="chartContainer">

              <div class="table-layout">
                <div class="table-cell row">
                  <h1>0</h1>
                  <span style="font-size: 14px">blah blah blah blah blah blah blah blah blah blah blah blah</span>
                </div>
                <div class="table-cell row">
                  <span style="font-size: 64px; opacity: 0.3"></span>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="panel panel-default summary-panel" style="background: green; color: white;">
          <div class="panel-body flexboxContent">

            <div  class="chartContainer">

              <div class="table-layout">
                <div class="table-cell row">
                  <h1>0</h1>
                  <span style="font-size: 14px">blah blah blah blah</span>
                </div>
                <div class="table-cell row">
                  <span style="font-size: 64px; opacity: 0.3"></span>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>

      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="panel panel-default summary-panel" style="background: green; color: white;">
          <div class="panel-body flexboxContent">

            <div class="chartContainer">

              <div class="table-layout">
                <div class="table-cell row">
                  <h1>0</h1>
                  <span style="font-size: 14px">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span>
                </div>
                <div class="table-cell row">
                  <span style="font-size: 64px; opacity: 0.3"><i class="fa fa-smile-o"></i></span>
                </div>
              </div>

            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>

CSS：

.flexboxContainer {
  display: flex;
  border: solid red;
  flex-wrap: wrap;
}

.flexboxContent {
  border: solid black;
  flex: 1 1 0;
  align-items: stretch;
}

.table-layout {
  display:table;
  width:100%;
}

.table-layout .table-cell {
  display:table-cell;
}

.chartContainer {
    position: relative;
}

Codepen 示例： https://codepen.io/synchrosion/pen/yopxGY

为了清晰起见，我用边框突出显示了 flexbox 容器和 flexbox 内容，并且我试图让我所有的 flexbox 内容框都处于相同的高度，而不指定固定的最小或最大高度。

任何帮助将不胜感激

【问题讨论】：

你使用的方式标记太多了。
我只是从一段更复杂的代码中简化它，我想在 div 中保留一些额外的 div，以防它们被证明是为什么 flexbox 不等于我的问题div 高度
多余的标记使得正确使用 flexbox 变得更加困难。

标签： css flexbox

【解决方案1】：

只需添加到您的 CSS：

    .panel-default {
         height: 100%;
    }

【讨论】：

【解决方案2】：

这是你的问题，你必须为你的 flexboxContent 设置高度 100%

jsfiddle.net/ybtnhzna

【讨论】：