TailwindCSS 布局中的溢出问题答案

【问题标题】：Problem with overflow in TailwindCSS layoutTailwindCSS 布局中的溢出问题
【发布时间】：2021-05-19 05:31:25
【问题描述】：

我正在尝试在 Tailwind CSS 中为仪表板实现以下布局。

初始高度将是屏幕尺寸，并且不应超过初始高度。

仪表板的蓝色区域最初是空的（但它应该占据整个区域，即使是空的），它将开始添加信息，最终将超出指定的蓝色区域以及何时发生这种情况我希望该区域在 Y 轴上溢出并带有滚动条。我的问题是，当溢出发生时，整个页面都会溢出，而不仅仅是蓝色部分使该列超出屏幕的限制。

I created a CodePen with the HTML code that I currently have.

<div class="h-screen bg-black flex flex-col">
  <div class="bg-green-200">NAVBAR</div>
  <div class="bg-blue-200 flex-1">
    <div class="flex h-full">
      <!-- LEFT -->
      <div class="flex-1 bg-yellow-200">
        <div class="flex flex-col h-full">
          <div class="flex-1 bg-blue-800 text-white text-2xl p-8">
            This is the only area that will be growing
            and should eventually overflow displaying
            scrollbars only in the blue area.
            What I'm having problem with is to initially 
            use all the available blue space and then when
            the content overflows not making the whole page
            scrolldown, only this blue section.
            <!-- DIVS HERE SHOULD GROW AND OVERFLOW -->            
            <!-- Uncommenting the following statements will
                show what is my current problem -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
<!--             <div class="mb-32">.</div> -->
          </div>
          <div class="flex-none bg-red-200 h-32">
            This will always be fixed height
          </div>
          <div class="flex-none bg-red-300 h-20">
            This will always be fixed height
          </div>
        </div>
      </div>
      <!-- //LEFT -->
      <div class="flex-1 bg-yellow-300">MIDDLE</div>
      <div class="flex-1 bg-yellow-400">RIGHT</div>
    </div>
  </div>
  <div class="bg-green-200">
    The Footer should always be visible
  </div>
</div>

任何帮助将不胜感激

【问题讨论】：

你需要设置一个高度/最大高度让它溢出（或者一个 flex 技巧设置其他所有东西都增长：0）
该 div 上已经定义了一个高度，但没有按预期工作

标签： css tailwind-css

【解决方案1】：

我最终设法完成了我想要的，我在这里分享代码，似乎我在滥用溢出属性。有了这个，该部分可以增长，而其余部分保持灵活但固定。

<div class="h-screen bg-black flex flex-col">
  <div class="bg-green-200">NAVBAR WORKING</div>
  <div class="bg-black flex flex-col h-full overflow-y-auto">
    <!-- THREE COLUMNS LAYOUT -->
    <div class="flex h-full">
      
      <!-- COLUMN ONE -->
      <div class="flex-1 flex flex-col bg-white">
        
        <div class="flex flex-col bg-red-500 h-full">
          
          <div class="bg-white h-full flex-grow-0 overflow-y-auto">
            <div class="flex flex-col">
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
              <div class="h-48 bg-black"></div>
              <div class="h-48 bg-red-700"></div>
            </div>
          </div>
          
          <div class="bg-red-200 h-32 flex-none">
            This will always be fixed height
          </div>
          
          <div class="bg-red-300 h-20 flex-none">
            This will always be fixed height
          </div>
          
        </div>
        
      </div>
      <!-- COLUMN ONE -->
      
      <!-- COLUMN TWO -->
      <div class="flex-1 bg-yellow-300">MIDDLE</div>
      <!-- COLUMN TWO -->
      
    </div>
    <!-- THREE COLUMNS LAYOUT -->
  </div>
  <div class="bg-green-200">
    The Footer should always be visible
  </div>
</div>

【讨论】：