代码之家 › 专栏 › 技术社区 › Lucca

顺风“w-screen”打破其他潜水器

tailwind-css flexbox reactjs css

Lucca · 技术社区 · 2 年前

我有以下屏幕自动取款机:

我试图制作一个填充整个空格的div,但当我尝试使用“w-screen”或宽度上的任何高值时,它会分解为左div,如下所示:

有什么解决办法吗?下面是以“rose”为背景的代码,它打断了左侧的div:

<div>
    <Header />
    <div className="flex">
        <Menu />
            <div className="flex-col w-96 h-screen ml-20 bg-verdeMenuFin">
                <div className="ml-10 mt-10 w-80 h-28 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
                <div className="ml-10 mt-14 w-80 h-32 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
                <div className="ml-10 mt-14 w-80 h-96 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
            </div>
        <div className="flex bg-rose-900 w-screen h-screen">

        </div>
    </div>

</div>

1 回复 | 直到 2 年前

Tom 2 年前

自 <div> 您正在应用 w-screen 的类是的子级 <div> 它的显示值为 flex ,您可以使用 grow 上的类 <div> 带有玫瑰背景,以允许其填充剩余的可用空间。

以下是的TailwindCSS文档 grow 班

<div>
  <Header />
  <div className="flex">
    <Menu />
    <div className="flex-col w-96 h-screen ml-20 bg-verdeMenuFin">
      <div className="ml-10 mt-10 w-80 h-28 bg-verdeIdv rounded-2xl shadow-sombraTres">

      </div>
      <div className="ml-10 mt-14 w-80 h-32 bg-verdeIdv rounded-2xl shadow-sombraTres">

      </div>
      <div className="ml-10 mt-14 w-80 h-96 bg-verdeIdv rounded-2xl shadow-sombraTres">

      </div>
    </div>
    <!-- grow class added to this div and w-screen class removed -->
    <div className="flex grow bg-rose-900 h-screen">

    </div>
  </div>
</div>