I need a div in a column that becomes scrollable if there is too many items in it, but for some reason the only way I found a solution was with "height: 0" which makes no sense to me, I think I understand the rest, but that one remains mysterious to me. Maybe someone here can explain to me things that I dont understand about what is going on here

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<!-- Take whole viewport and put container for rows -->
<form class="vh-100 bg-danger container-fluid">
  <!-- Apply padding inside the container (not overriding container-fluid) -->
  <div class="p-2 h-100 d-flex flex-column gap-2">
    <div class="row bg-black">Row 1</div>
    <div class="row bg-black">Row 2</div>

    <!-- Fill the remaining space in viewport -->
    <div class="row gap-2 flex-grow-1">
      <div class="col bg-black">Column 1</div>
      <div class="col-6 bg-black d-flex flex-column">
        <div>Column 2</div>

        <!-- Why is height 0 needed here? -->
        <div class="flex-grow-1 overflow-auto" style="height: 0">
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px">test</div>
        </div>
      </div>
      <div class="col bg-black">Column 3</div>
    </div>
  </div>
</form>
<script src="/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

I need a div in a column that becomes scrollable if there is too many items in it, but for some reason the only way I found a solution was with "height: 0" which makes no sense to me, I think I understand the rest, but that one remains mysterious to me. Maybe someone here can explain to me things that I dont understand about what is going on here

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous" />
<!-- Take whole viewport and put container for rows -->
<form class="vh-100 bg-danger container-fluid">
  <!-- Apply padding inside the container (not overriding container-fluid) -->
  <div class="p-2 h-100 d-flex flex-column gap-2">
    <div class="row bg-black">Row 1</div>
    <div class="row bg-black">Row 2</div>

    <!-- Fill the remaining space in viewport -->
    <div class="row gap-2 flex-grow-1">
      <div class="col bg-black">Column 1</div>
      <div class="col-6 bg-black d-flex flex-column">
        <div>Column 2</div>

        <!-- Why is height 0 needed here? -->
        <div class="flex-grow-1 overflow-auto" style="height: 0">
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px">test</div>
        </div>
      </div>
      <div class="col bg-black">Column 3</div>
    </div>
  </div>
</form>
<script src="https://cdn.jsdelivr/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

• html
• css
• twitter-bootstrap
• bootstrap-5

Share Improve this question Follow edited Nov 16, 2024 at 13:06 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Nov 16, 2024 at 6:41 SamSam 1611 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

<link href="https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<form class="h-100 bg-danger text-white container-fluid">
  <!-- Apply padding inside the container (not overriding container-fluid) -->
  <div class="p-2 h-100 d-flex flex-column gap-2">
    <div class="row bg-black">Row 1</div>
    <div class="row bg-black">Row 2</div>

    <!-- Fill the remaining space in viewport -->
    <div class="row gap-2 flex-grow-1">
      <div class="col bg-black">Column 1</div>
      <div class="col-6 bg-black d-flex flex-column">
        <div>Column 2</div>

        <!-- Why is height 0 needed here? -->
        <div class="flex-grow-1 overflow-auto">
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px"></div>
          <div style="height: 100px">test</div>
        </div>
      </div>
      <div class="col bg-black">Column 3</div>
    </div>
  </div>
</form>

You have set height of the form as of viewport height

<form class="vh-100 bg-danger container-fluid">

which is setting the height of the form as of the viewport. If you change that height to 100% that is h-100 then it works as expected.

<form class="h-100 bg-danger container-fluid">

You can refer this fiddle.

Have added colour of texts, removed height 0, and made height of form h-100.

Hope, this helps.