时间戳

首页 > 解决方案 > Tailwind - Flex 行儿童不会长高

css - Tailwind - Flex 行儿童不会长高

问题描述

我有以下内容：

.flex .flex-row .flex #1 .flex #2

两个弹性盒子的高度相同。当.flex #2两个 flex box 的内容发生变化时，也会在底部留下很多空白空间 .flex #1

我怎样才能防止这种情况，而是导致内容.flex #2滚动？

我不想设置任何固定高度，希望高度.flex #2始终与.flex #1内容的高度相同。

标签： cssflexboxtailwind-css

解决方案

我想你正在寻找.items-stretch.

示例：（因为您没有添加自己的一些代码）

<div class="flex items-stretch bg-gray-200 h-24">
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="flex-1 text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

将产生相同的 div 高度： 基于 .items-stretch 的相同 div 高度

推荐阅读