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