skip to Main Content

I’m trying to create a grid with 100% height and the following appearance:

Desired result

The second row should fill the remaining vertical space, even if contents of cells C & D are too short.

Furthermore, if the contents of row D are too large, then a vertical scrollbar should appear for that cell only, like this:

Desired result

How can I do that? This is what I have (https://jsfiddle.net/z8742qdo/28/):

  <body class="vh-100">
    <div class="h-100 container-fluid">
      <div class="row">
        <div class="col-10 bg-warning">
          A
        </div>
        <div class="col-2 bg-primary">
          B
        </div>
      </div>
      <div class="row">
        <div class="col-2 bg-danger">
          C
        </div>
        <div class="col-10 bg-success">
          D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br>
          with<br>scrollbars<br>only<br>
        </div>
      </div>
    </div>
  </body>

2

Answers


  1. <body class="vh-100">
    <div class="h-100 container-fluid">
      <div class="row">
        <div class="col-10 bg-warning">
          A
        </div>
        <div class="col-2 bg-primary">
          B
        </div>
      </div>
      <div class="row">
        <div class="col-2 bg-danger">
          C
        </div>
        <div class="col-10 bg-success" style='height:100px; overflow-y: auto;'>
          D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br>
          with<br>scrollbars<br>only<br>
        </div>
      </div>
    </div>
    

    set max-height to cell D and set overflow-y: auto to show scrollbar only contents of cell D is large.

    Login or Signup to reply.
  2. For the layout, use flexbox with .flex-column on the .container-fluid, then add .flex-grow-1 to the second .row to make it grow to fill available space.

    For the overflow, you need .overflow-auto on the scrollable div and you will also need to add .overflow-hidden to the immediate parent .row.

    <html>
    
    <head>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    </head>
    
    <body class="vh-100">
      <div class="h-100 container-fluid d-flex flex-column ">
        <div class="row">
          <div class="col-10 bg-warning">
            A
          </div>
          <div class="col-2 bg-primary">
            B
          </div>
        </div>
        <div class="row flex-grow-1 overflow-hidden">
          <div class="col-2 bg-danger h-100">
            C
          </div>
          <div class="col-10 bg-success h-100 overflow-auto">
            D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br> with<br>scrollbars<br>only<br> D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br> with<br>scrollbars<br>only<br> D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br>        with<br>scrollbars<br>only<br> D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br> with<br>scrollbars<br>only<br> D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br> with<br>scrollbars<br>only<br>
            
          </div>
        </div>
      </div>
    </body>
    
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search