使两个并排的 html 元素适应它们的宽度，以便（文本）内容获得相同的高度

Question

有没有办法让两个 html 元素并排放置，并在它们之间自动分配可用宽度，以便每个元素的内容具有相同的高度？

示例：

考虑有 2 个 p-tag，其中一个由 200 个字符组成，另一个由 100 个字符组成。我希望他们并排坐在一起，一起填满 100% 的父容器。它们各自的宽度应自动分布，以便每个 p-tag 包含相同数量的行。

图片示例

我不知道什么： Two boxes with text that has same width but different heights of the content

两个盒子的宽度应该是分布的，所以看起来更像这样：Two boxes with text that has different width but same heights of the content

---

这可以用 css-grid、flexbox 或其他方法实现吗？ 如果是这样，是否可以扩展以应用于包含图像和文本的混合内容？

Answer 1

类似这样，flex的stretch值尽量保持高度一致，但如果两个段落的字数相差太多，高度就会不一样

.box {
  display: flex;
  align-items: stretch;
  outline: 1px solid red;
  }
  
 p {
  background-color: #ccc;
  }
  
 p:last-child {
  background-color: #999;
 }

<div class="box">
  <p> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
    not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ip</p>
  <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
    </p>
</div>