How to achieve a two independently-scrolling column layout?-CodePudding

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 >

<div >HEADER</div>

<div >

<div >
  <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 >
  <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>

https://jsfiddle.net/z0qpm1vL/

CodePudding user response：

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;
}

CodePudding user response：

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 >

  <div >HEADER</div>
  
  <div >
  
    <div >
      <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 >
      <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>

CodePudding user response：

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 >

  <div >HEADER</div>
  
  <div >
  
    <div >
      <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 >
      <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>