CSS flex 没有占用同样是 flex 的父 div 的全高

Question

我正在使用 React 构建 Web 应用程序。我正在使用 Tailwind CSS 来设置 UI 组件的样式。现在，我无法将 flex div 的子元素居中，它是另一个 flex div.

的子元素

这是我的代码：

<div className="flex h-full justify-center items-center">
<div data-page-id={'login-page'} className={"border rounded-3xl shadow w-2/6 min-w-500px min-h-400px bg-primary p-4 flex flex-col"}>
            <div className={"text-center"}>
                <h1 className="text-white text-2xl mb-3">Login</h1>
                <p className="text-white text-xs">Admin portal</p>
            </div>
            <div className={"flex-1"}>
                <div className={"flex flex-col justify-center items-center"}>
                    <h3>Content Title</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam consectetur debitis
                        distinctio dolor eius esse et illo, ipsam laudantium minus odit officiis quasi reprehenderit
                        sint temporibus ut vero vitae!</p>
                </div>
            </div>
        </div>
</div>

上面的代码在浏览器中给出了以下输出。

这不是我想要达到的目标。我想要的是我希望内容部分中的 flex div 占据父级的全高。但它并没有占用剩余的 space，如下面的屏幕截图所示。

我的代码有什么问题，如何修复它以占据整个高度？

Answer 1

首先，我注意到您 arbitrary class values 的使用方式有误。每当您需要自己的高度、宽度等值时，都应该在方括号内传递。像这样min-w-[500px] min-h-[400px]

其次，当您使用 flex-1 它正在扩展行（水平），因此它将占用所有可用的宽度而不是高度。因为默认情况下 flex-direction in tailwind 是 row。您需要使用 flex flex-col flex-1 更改它。现在您的 div 将扩展到可用高度。我已经为你的案例做了一个工作示例。你可以看这里https://codesandbox.io/s/jolly-montalcini-97x7bx?file=/src/App.js

CSS flex 没有占用同样是 flex 的父 div 的全高

CSS flex is not taking the full height of the parent div which is also flex

flexbox

tailwind-css