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

Html – Why is height:0 needed here to make the div behave as expected?

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.net/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.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
Tags:

2

Answers


  1. 0

    By using height: 0,

    you ensure:

    1. The element starts with zero height, allowing flex-grow to dictate its final size.
    2. The overflow-auto property makes the element scrollable if the content exceeds the allocated space.
    3. Without height: 0, the browser might default to the content’s natural height, breaking the scrollable behavior in a flexbox layout.

    But there’s an alternative approach too if you find this as too much unintuitive… you would get the same effect by setting the parent container’s flex property like this:

    THE CODE:

    .flex-grow-1 {

    flex: 1 1 auto; /* Flex-grow enabled, and height adapts to content */

overflow: auto;

    }

    This is a common pattern in CSS flexbox layouts. While height: 0 may seem strange, it’s actually a clever way to manipulate the flexbox behavior for scrollable content

    Login or Signup to reply.
  2. 0

    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.

    Hope, this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search