多个框相同的高度

Question

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

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

当我缩小页面时，盒子的内容也缩小了。我本来希望看到这样的：

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

事实上，我看到 class 中的框收缩成这样：

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

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

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

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

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

Answer 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>

Answer 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>

多个框相同的高度

Multiple boxes same height

html

css

word-wrap

flexbox