我有四个 div/列，其中包含不同数量的文本。使用 flexbox 我假设我能够将所有列的大小调整为最大的 div 大小，但是从包含的 codepen 中你应该看到所有列都以不同的高度出现。
我的最终目标是让它们都具有相同的高度，但在调整页面大小时它们应该一致地挤压和拉伸(stretch)，在中间点，列将重新排列在 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;
}
代码笔示例: https://codepen.io/synchrosion/pen/yopxGY
为了清楚起见，我用边框突出显示了 flexbox 容器和 flexbox 内容，并且我试图让我的所有 flexbox 内容框处于相同的高度，而不指定固定的最小或最大高度。
任何帮助将不胜感激
最佳答案
只需添加到您的 CSS 中:
.panel-default {
height: 100%;
}
关于css - 使用 flexbox 的平行列高度问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45739377/