如何使用Tailwind让子元素不继承父元素高度且随内容自适应（无需指定高度）

问题出在Flex布局的默认行为：当父元素设置为flex时，子元素默认会继承父元素的高度（因为align-items默认值是stretch）。要让子元素根据自身内容自动扩展高度，只需要修改这个对齐规则即可，不需要指定固定高度。

方法1：修改父元素的对齐方式 #

给父元素添加items-start类，这样所有子元素都会以顶部对齐，高度由自身内容决定：

<div class="flex w-full bg-red-400 p-5 h-screen items-start">
  <div class="flex w-40 bg-yellow-400 p-5">
    Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. The first two words themselves are a truncation of dolorem
  </div>
</div>

方法2：单独设置子元素的对齐方式 #

如果只想让特定子元素不继承高度，可以给该子元素添加align-self-start类，不影响其他子元素：

<div class="flex w-full bg-red-400 p-5 h-screen">
  <div class="flex w-40 bg-yellow-400 p-5 align-self-start">
    Lorem ipsum is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin. The first two words themselves are a truncation of dolorem
  </div>
</div>

原理说明 #

• items-start会让Flex容器内的所有子元素沿交叉轴（此处为垂直方向）顶部对齐，不再拉伸填充父元素高度。
• align-self-start是针对单个子元素的对齐控制，优先级高于父元素的align-items设置，同样能让子元素高度由内容决定。

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