Question

0

60

Views

Bootstrap Flex - Prevent Child Items from Stretching Container

I'm trying to establish a layout where everything can be viewed without scrolling. Any panels that needs more space should be scrollable. In the example below, instead of main-left being stretched, I would like it so that the contents of main-left is srollable and not stretch the entire row.

for (let i = 0; i < 20; i++) {
$("#main-left").append("<div>" + i + "</div>");
}

html,
body {
  height: 100%;
  max-height: 100vh;
}

#main {
  background-color: cyan;
  min-height: 100vh;
}


#main-right {
  background-color: red;
}

#main-left {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid d-flex flex-column" id="main">
  <nav class="navbar">
    <div class="container-fluid">
      <div class="navbar-header">
        <d class="navbar-brand">Header</d>
      </div>
    </div>
  </nav>
  <div class="row d-flex flex-grow-1 " id="main-row">
    <div class="col-5 d-flex flex-column" id="main-left">
      
    </div>
    <div class="col-2" id="main-center">

    </div>
    <div class="col-5" id="main-right">

    </div>
  </div>
</div>

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-01T02:20:30.634Z

In order for an element to scroll, it must:

Have an explicit height
Have enough content to overflow that explicit height
Have overflow: auto or scroll declared

The following CSS rule will target all direct children of your #main-row and prevent them from stretching your container, allowing scroll:

#main-row > * {
  max-height: 100%;
  overflow: auto;
}

for (let i = 0; i < 30; i++) {
  $("#main-left").append("<div>" + i + "</div>");
}

#main {
  background-color: cyan;
  max-height: 100vh;
  overflow: hidden;
}

#main-row>* {
  max-height: 100vh;
  overflow: auto;
}

#main-right {
  background-color: red;
}

#main-left {
  background-color: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid d-flex flex-column" id="main">
  <nav class="navbar">
    <div class="container-fluid">
      <div class="navbar-header">
        <d class="navbar-brand">Header</d>
      </div>
    </div>
  </nav>
  <div class="row d-flex flex-grow-1 " id="main-row">
    <div class="col-5 d-flex flex-column" id="main-left">
      left
    </div>
    <div class="col-2" id="main-center">
      center
    </div>
    <div class="col-5" id="main-right">
      right
    </div>
  </div>
</div>