CODEWITHSUNDEEP
csstailwind-css
Dalton Sandbothe
Dalton Sandbothe

Reputation: 1

How to achieve a two independently-scrolling column layout?

I have a simple layout with a header and two columns. The goal is that neither column should ever expand past the bottom of the screen, causing the whole page to be scrolled. Instead they should each scroll independently if their content requires. A minimalized example and fiddle are below.

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

<div class="min-h-screen max-h-screen w-full bg-gray-400">

<div class="flex justify-center bg-gray-500">HEADER</div>

<div class="flex mb-4">

<div class="w-1/2 bg-gray-600">
  <input type="text">
  <div class="overflow-y-auto">
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
    <div>Column 1</div>
  </div>
</div>

<div class="w-1/2 bg-gray-700">
  <input type="text">
  <div class="overflow-y-auto">
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
    <div>Column 2</div>
  </div>
</div>

https://jsfiddle.net/z0qpm1vL/

Upvotes: 0

Views: 1832

Answers (3)

Jean Will
Jean Will

Reputation: 553

This is how to keep your viewport scaling:

flex flex-col on global container, grow overflow-hidden on lists container and overflow-auto on each list.

.as-console-wrapper { display: none !important }
<script src="https://cdn.tailwindcss.com"></script>

<div class="h-screen bg-gray-400 flex flex-col">

  <div class="flex justify-center bg-gray-500">HEADER</div>
  
  <div class="flex mb-4 grow overflow-hidden">
  
    <div class="w-1/2 bg-gray-600 overflow-auto">
      <input type="text">
      <div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
      </div>
    </div>
    
    <div class="w-1/2 bg-gray-700 overflow-auto">
      <input type="text">
      <div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
      </div>
    </div>
    
  </div>
</div>

Upvotes: 1

nart
nart

Reputation: 1848

By each column you need to set fixed height to itself.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="min-h-screen max-h-screen w-full bg-gray-400">

  <div class="flex justify-center bg-gray-500">HEADER</div>
  
  <div class="flex mb-4">
  
    <div class="w-1/2 bg-gray-600">
      <input type="text">
      <div class="overflow-y-auto h-64">
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
        <div>Column 1</div>
      </div>
    </div>
    
    <div class="w-1/2 bg-gray-700">
      <input type="text">
      <div class="overflow-y-auto h-64">
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
        <div>Column 2</div>
      </div>
    </div>
    
  </div>
</div>

Upvotes: 2

Chalas
Chalas

Reputation: 59

You might try something like this. Fiddle

#left-col{
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right-col {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}

Upvotes: 1

Related Questions