如何实现不同容器下同类子元素等高且自适应内容？

要实现所有.a、.b类元素以及<li>标签等高，同时保证内容自适应不溢出，可结合Flexbox与Grid布局完成，以下是具体CSS代码：

ul {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 1rem; /* 可选：控制li之间的间距 */
}

li {
  flex: 1; /* 让所有li平分容器宽度 */
  display: grid;
  grid-template-rows: auto auto; /* 让.a和.b分别占一行，自动匹配同列最高元素高度 */
}

.a, .b {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 内容顶部对齐 */
  min-width: 0; /* 允许元素收缩到内容宽度以下，解决溢出核心 */
  word-wrap: break-word; /* 长文本自动换行 */
  overflow-wrap: break-word;
  padding: 1rem; /* 可选：添加内边距优化排版 */
}

/* 可选：给不同类元素添加区分样式 */
.a {
  background-color: #f5f5f5;
}

.b {
  background-color: #e8e8e8;
}

核心原理说明 #

1. <ul>容器：用display: flex实现<li>横向排列，flex: 1让每个<li>宽度均等分配。
2. <li>元素：通过grid-template-rows: auto auto，让同一列的.a、.b自动对齐整列中最高元素的高度，实现同类别元素等高。
3. 内容溢出处理：min-width: 0打破Flex子项默认的最小宽度限制，配合文本换行属性，确保浏览器宽度缩小时内容自动换行，不会溢出容器。
4. 内部内容排版：flex-direction: column让.a、.b内部元素垂直排列，保证内容正常展示。

完整可运行代码示例 #

<ul>
  <li>
    <div class="a">
      <h1>1</h1>
      <p>a... 这里可以放超长文本测试换行：aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </div>
    <div class="b">
      <h1>1</h1>
      <p>b...</p>
    </div>
  </li>
  <li>
    <div class="a">
      <h1>1</h1>
      <p>c...</p>
    </div>
    <div class="b">
      <h1>1</h1>
      <p>d... 这里放更多内容测试高度自适应：dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
    </div>
  </li>
  <li>
    <div class="a">
      <h1>1</h1>
      <p>e... 测试多行内容：e... e... e... e... e... e... e... e... e... e... e... e...</p>
    </div>
    <div class="b">
      <h1>1</h1>
      <p>f...</p>
    </div>
  </li>
</ul>

内容的提问来源于stack exchange，提问作者Genevieve