自动拉伸顺风体以适应其他div

Question

我在VueJS中使用Tailwind CSS，我的DIVs有一个小问题。我不习惯使用CSS框架，以前也从未遇到过这个问题。

问题：https://i.ibb.co/XWbdsxT/screenshot.png正如你在屏幕截图上看到的，红色的div超出了页面的底部(这是正常的)。我想要深灰色的和浅灰色的，然后沿着红色一直到底部。

我试过了：

将h-full或/和h-screen类添加到灰色div将h-full或和h-screen类添加到正文和/或html将这些类添加到主父div(其中包含灰度)

它似乎没有任何效果。我做错了吗？代码如下：

<template>
  <div class="hello">
    <div class="flex flex-row">
      <div class="w-1/5 h-screen bg-darkgray"></div>
      <div class="w-4/5 h-screen bg-gray-200">
        <div class="w-full h-16">
          <div>
            <div class="bg-white flex items-center shadow-xl">
              <input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article">
              <div class="p-4 flex flex-column">
                <div class="border-r-2 w-16">
                  <button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
                    <img src="../assets/search_icon.png"/>
                  </button>
                </div>
                <div class="flex flex-column">
                  <button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
                    <img src="../assets/notifications.png"/>
                  </button>
                  <button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
                    <img src="../assets/user.png"/>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div class="flex flex-row w-11/12 h-16 mt-20 m-auto justify-between">
            <p class="text-3xl font-bold">Dashboard</p>
            <button class="bg-orange hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button">
              <span class="mr-2">+</span> Create an article
            </button>
          </div>
          <div class="flex flex-row w-11/12 h-16 mt-4 m-auto bg-white rounded-t-2xl justify-between">
            <div class="ml-6 mt-5">
              <a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
            </div>
            <div class="flex justify-end ml-6 mt-5 mr-6 space-x-4">
              <div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
              <div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
              <div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
            </div>
          </div>
          <div class="flex w-11/12 h-5xl mt-0.5 bg-red-500 m-auto rounded-b-2xl"></div>
        </div>
      </div>
    </div>
  </div>
</template>

请不要注意这是没有响应的事实。它不应该是这样的。

Answer 1

尝尝这个,

您的Dashboard内容区域需要overflow:hidden。检查此doc

<div class="flex flex-row w-full h-screen">
  <div class="w-1/5 max-h-full bg-gray-800 text-white p-6">Sidebar</div>
  <div class="flex flex-col w-full max-h-full bg-gray-200">
    <div class="flex flex-row w-full bg-white items-center shadow-xl">
      <input class="w-full py-4 px-6 text-gray-700 leading-tight focus:outline-none" id="search" type="text" placeholder="Search an article" />
      <div class="flex p-4 flex-column">
        <div class="border-r-2 w-16">
          <button class="text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
            <img src="../assets/search_icon.png" />
          </button>
        </div>
        <div class="flex flex-column">
          <button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
            <img src="../assets/notifications.png" />
          </button>
          <button class="ml-3 text-darkgray rounded-full p-2 hover:bg-gray-100 focus:outline-none w-12 h-12 flex items-center justify-center">
            <img src="../assets/user.png" />
          </button>
        </div>
      </div>
    </div>
    <div class="flex flex-col max-w-full m-6 h-full rounded-b-2xl overflow-hidden">
      <div class="flex flex-row w-full my-6 m-auto justify-between">
        <p class="text-3xl font-bold">Dashboard</p>
        <button class="bg-yellow-500 hover:bg-darkgray text-white font-bold h-12 px-4 rounded-xl justify-end" type="button"><span class="mr-2">+</span> Create an article</button>
      </div>
      <div class="flex flex-row w-full bg-white rounded-t-2xl justify-between px-6 py-6 h-16">
        <a class="text-orange font-bold">HIGHLIGHTS ARTICLES</a>
        <div class="flex justify-end space-x-4">
          <div id="1" class="selected cursor-pointer"><a class="item-selected font-bold">Recently updated</a></div>
          <div id="2" class="cursor-pointer"><a class="item font-bold">Recently seen</a></div>
          <div id="3" class="cursor-pointer"><a class="item font-bold">Created by me</a></div>
        </div>
      </div>
      <div class="flex w-full mt-0.5 bg-red-500 rounded-b-2xl max-h-full p-6">Test Doc</div>
    </div>
  </div>
</div>

在Tailwind Play上查看