html - 多个框相同的高度

Question

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

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

当我缩小页面时，盒子的内容也会减少。我本来希望看到这样的:

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

事实上，我看到类中的盒子像这样缩小:

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

1. 有没有办法将盒子的高度动态调整到盒子的最大高度？
2. 如果 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>