In TailwindCSS, why is my flex-1 element overflowing the height of the parent element, even though I use overflow-y-scroll in the overflowing child?

Question

I am trying to create a page using HTML and TailwindCSS with some static navigation/menu and with scrollable content next to it. The scrollable content is intended to be positioned in the lower right part of the page, so the static part is left and on top of it.

My try: A parent div with h-screen with flex-col, wherein the first div is the top part with fixed height. The next div below it should now extend to the bottom of the page, this is why I used flex-1 to grow it.

The problem: Once the content in the scrollable div exceeds a certain length, the parent div (with flex-1) gets stretched and the whole page exceeds the h-screen limit, even though I have set overflow-y-scroll. If I set a certain height to the scrollable div, the scrolling works. However I don't want to set that height fixed but just fill the available space.

<div class="h-screen flex flex-col ">
  <div class="grid grid-cols-3 h-16">
    <div class=" col-span-1">
    Title (static)
    </div>
    <div class="col-span-2">
      Info (static)
    </div>
  </div>
  <div class="flex-1 grid grid-cols-3">
    <div class="col-span-1 flex flex-col">
      <div class="flex-1">Menu (static)</div>
      <div class="">
        About (static)
      </div>
    </div>
    <div class="col-span-2 overflow-y-scroll">
      <p>scrollable:</p>
      <div class="">content</div>
      <div class="">content</div>
      <div class="">content</div>
      <div class="">content</div>
      <div class="">content</div>
      <div class="">content</div>
      <div class="">content</div>
    </div>
  </div>
</div>

Here is a playground with my attempt (It should look like this no matter how much "content"): https://play.tailwindcss.com/LhZUa0iL1K

Many thanks in advance.

Answer 1

By default, the overflow responsibility is given to the body . To make it work, you would need to make the wrapper div overflow initially to bring the overflow responsibility in. You just need to add overflow-y-auto to the wrapper div for the second column.

<div class="flex-1 grid grid-cols-3 overflow-y-auto">

Link: https://play.tailwindcss.com/XNKEsPano7

Here's another take:

1. Divide the screen into two columns with grid
2. Make the columns a flexbox with column direction
3. For the second column, make the wrapper div overflow to bring the overflow responsibility in, then make the content div overflow next to bring the overflow responsibility further in to the content div

<div class="h-screen grid grid-cols-3">
  <!-- Column 1 -->
  <div class="col-span-1 flex flex-col bg-gray-100">
    <div class="h-16">Title (static)</div>
    <div class="bg-green-100 flex-grow flex flex-col">
      <div class="bg-gray-400 flex-grow">Menu (static)</div>
      <div class="bg-yellow-100">About (static)</div>
    </div>
  </div>
  <!-- Column 2, the wrapper div -->
  <div class="col-span-2 flex flex-col overflow-y-auto">
      <div class="bg-green-100 h-16 flex-shrink-0">Info (static)</div>
      <!-- Content div -->
      <div class="text-5xl flex-grow overflow-y-auto">
        scrollable:
        <div class="">content</div>
        <div class="">content</div>
        <div class="">content</div>
        <div class="">content</div>
      </div>
  </div>
</div>

Link: https://play.tailwindcss.com/KhhTVdTKmT