Multiple boxes same height

Question

I have a content in 3 different boxes as defined in some classes (e.g. box-cls). The style is for all the three the same. Therefore I get in an example:

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

When I shrink the page than the content of the boxes is also reduced. I would have expected to see it like this:

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

Matter of fact I see the boxes in the class shrink like this:

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

1. Is there a way to adjust the box height dynamically to the max height of a box?
2. If 1) is not possible: Is it possible to set the height fixed as soon as the the length of the boxes falls below a fixed limit?

I tried with some @mediabut didn't succeed in the proper styling. Currently I have only a fixed solution:

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

but would like to have a more dynamic solution - cuz with my approach the height is in many cases to large! Looking for a CSS-solution - not a JQuery (or similar)

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>