让两个并排的html元素调整宽度，使(text-)内容获得相同的高度。

Question

有没有办法让两个html元素并排而坐，并将可用的宽度自动分配到它们之间，使每个元素的内容获得相同的高度？

举个例子，有两个p-tag，其中一个由200个字符组成。

考虑有2个p标签，其中一个由200个字符组成，另一个由100个字符组成。我想让它们并排而坐，一起填满100%的父容器。它们各自的宽度应该被自动分配，以便每个p-tag由同样多的行组成。

带图片的例子

我不知道什么。两个盒子里的文字宽度相同，但内容的高度不同

两个盒子的宽度应该分配好，这样看起来更像这样。两个盒子里的文字宽度不同，但内容的高度是一样的

---

是否可以用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>