css Question posted in
Some basic documentation can be found here.

Css – 2×2 Boostrap grid, with 100vh, and each cell with vertical overflow auto

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>
Tags:

2

Answers


  1. 0 
    <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. 0

    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