多个相同高度的盒子答案

【问题标题】：Multiple boxes same height多个相同高度的盒子
【发布时间】：2017-07-16 17:22:34
【问题描述】：

我在某些类（例如 box-cls）中定义的 3 个不同的框中有一个内容。三者的风格都是一样的。因此我举个例子：

+---------+---------+---------+
| 12 34   | my long | ab de   |
+---------+---------+---------+

当我缩小页面时，框的内容也会减少。我本来希望看到它是这样的：

+-------+-------+-------+
| 12 34 | my    | ab de |
|       | long  |       |
+-------+-------+-------+

事实上，我看到类中的框缩小如下：

+-------+-------+-------+
| 12 34 | my    | ab de |
+-------+ long  +-------+
        +-------+

有没有办法将盒子高度动态调整到盒子的最大高度？
如果 1) 不可行：是否可以在盒子长度低于固定限制时立即将高度设置为固定值？

我尝试了一些@media，但没有成功设置正确的样式。目前我只有一个固定的解决方案：

.box-content {
    min-height: 46px!important;
    display: flex;
    align-items: center;
    justify-content: center;
 }

但希望有一个更动态的解决方案 - 因为我的方法在很多情况下高度太大了！寻找 CSS 解决方案 - 不是 JQuery（或类似的）

【问题讨论】：

你能添加你的盒子的代码吗？最好在代码 sn-p 中。因为 flex-container 应该默认自动调整盒子高度 (align-items: justify)。
1.是的...使用align-items: stretch;
@Vadim：对不起，我不明白我应该添加什么。如果我不设置元素的最小高度，我会得到不同的结果。 justify 也无济于事。或者你的意思是<div class...>12 34</div>???
@Jozi：如果我尝试：.box-content{display: flex; align-items: stretch;} 这也无济于事 :-/ 或者您希望完整的样式应该是什么样子？备注：align-items: center 对齐盒子中间的项目（在我的两行 ASCII 示例中显示可能不是很好：-/）
@LeO 我要求您提供代码来重现您的问题并解决它。

标签： html css flexbox word-wrap

【解决方案1】：

.boxes{
  display: flex;                  /* 1. */
}

.box {
  flex: 1;                        /* 2. */
  border: 1px solid chocolate;
}

<div class="boxes">
  <div class="box">12 34</div>
  <div class="box"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam voluptate, optio magni hic et non voluptatibus ipsum voluptates, quisquam suscipit consectetur ea eveniet ut eos corporis perspiciatis error temporibus aut.
  </div>
  <div class="box">ab de</div>
</div>

【讨论】：

【解决方案2】：

如果不想使用flex，可以使用浏览器支持更好的table/table-cell。

.wrap {
  display: table;
}
.box-content {
    min-height: 46px!important;
    display: table-cell;
  border: 1px solid red;
 }

<div class="wrap">
  <div class="box-content">12 34</div>
  <div class="box-content">my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long my long </div>
  <div class="box-content">ab de</div>
</div>

【讨论】：