Nested overflow columns in overflow hidden page

Question

I would like to create a full height webpage with a sticky header. The remainder of the page below the header is used for content. This content div itself should not have scroll, but I still want to have scrollable divs inside of it.

Some example HTML to show case the structure of what I want to achieve:

<div class="full-height-page">
        
        <-- sticks to the top -->
    <header class="sticky-header">
        HEADER
    </header>

        <-- fills the remainder of the height and has no scroll -->
    <main class="main-content">

        <div class="two-cols-wrapper"> 
                        
                        <-- this should scroll! -->
            <div class="col-1">
                <!-- overflowing content -->
            </div>
                        
                        <-- this should scroll! -->
            <div class="col-2">
                <!-- overflowing content -->
            </div>

        </div>

    </div>

</div>

A non-working example using Tailwind CSS

What is the best way to go about this? I see solutions that set a fixed height, but I want my height to be set dynamically.

I expected setting scroll-y would work as is, but it does not.

Answer 1

You'd want to apply height: 100% via h-full to the <div> child of the <main> element, so that the height is "passed" down to the column scrollable elements. Furthermore, flex-shrink: 0 via shrink-0 should be applied to each of the column content elements to avoid them shrinking to fit. You'd want to avoid them shrinking to fit so that the scrolling is evident.

<script src="https://cdn.tailwindcss.com/3.3.3"></script>

<div class="flex h-screen flex-col">
  <!-- Sticky header -->
  <header class="sticky top-0 bg-gray-800 p-4 text-white">
    <!-- Your sticky header content goes here -->
    HEADER
  </header>

  <!-- Content container, remainder of the height, no scroll -->
  <main class="h-full overflow-hidden">

    <!-- Content -->
    <div class="flex flex-row h-full">

      <!-- This should be scrollable! (BUT IT DOES NOT WORK) -->
      <div class="flex flex-col flex-1 overflow-y-scroll h-full">
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-500 shrink-0">SOME CONTENT</div>
      </div>

      <!-- This should be scrollable! (BUT IT DOES NOT WORK) -->
      <div class="flex flex-col flex-1 overflow-y-scroll h-full">
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
        <div class="h-20 bg-slate-300 shrink-0">SOME CONTENT</div>
      </div>


  </main>
  </div>