What purpose does setting the height to 0 serve in ensuring the div functions correctly in this context?

Can someone help me understand why setting "height: 0" is necessary to make a column scrollable when there are too many items in it? It seems counterintuitive to me, and I'm looking for some clarity on this issue. Any insight would be greatly appreciated.

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7f7272696e696f7c6d5d28332e332e">[email protected]</a>/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">test</div>
        </div>
      </div>
      <div class="col bg-black">Column 3</div>
    </div>
  </div>
</form>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a7a0f14091409">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f223f22">[email protected]</a>/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>

        <!-- Removing unnecessary height 0 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 the form height as the viewport height.

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

This sets the height of the form to match the viewport. If you change that height to 100% with 'h-100' then it will work as expected.

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

Check out this fiddle.

I have adjusted the text color, removed the unnecessary height 0, and changed the height of the form to 'h-100'.

I hope this explanation helps.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Jquery CSS malfunctioning on Post's div element

After retrieving a div using jquery's post method on my page, I am encountering an issue when attempting to apply CSS to the divs. Strangely enough, applying CSS with jquery to divs that are already present on the page works perfectly fine. Javascrip ...

jquerycss

Issues with CSS transparent color overlay fading on iOS device (Note: Since the original

I have created a grid of images with a unique effect where a semi-transparent overlay appears when you hover over them, revealing some text. I wanted to achieve the same effect on mobile devices by making the overlay fade in when tapped instead of hovered ...

javascriptjqueryhtmlcsstouch

Creating consistent vertical lines in HTML tables by aligning them equally on both sides

Hello, I currently have two tables with different content and I am looking to align the vertical lines between them. You can view my code here. I want to ensure that the vertical line alignment between the two tables looks consistent. Here is my current C ...

csshtml

Attempting to transfer JavaScript data from a webpage to an output file in HTML format

I was able to scrape the website mentioned from JavaScript into a local .html file successfully, however, I'm facing some issues with the output. The problems are: Only the last query (audioSource) is being produced, not the other requests It only ...

pythonhtmljsonpython-3.xbeautifulsoup

A guide on connecting static files in Django when the HTML context includes the file path

Here's the content of my views.py file: from django.shortcuts import render def page(request): css = 'temp/css.css' return render(request, 'temp/index.html', {'css': css}) and this is the content of templates/t ...

htmlcssdjangostatic

"Create a dynamic and user-friendly responsive navbar using Bootstrap with toggle

I need assistance with creating a new project template to convert a WordPress template into a Bootstrap template. Currently, I am working on the navbar and facing issues with responsive design and toggle navigation. On laptop devices, the navbar looks goo ...

htmlcsstwitter-bootstrap

Ways to increase the distance between a table and surrounding text

Is there a way to create space between table border and text on all sides? I tried using padding but it didn't work. Any suggestions? CSS .border1 { border-top:thin solid; border-bottom:thin solid; border-left:thin solid; border-right:thin s ...

html

Ensuring consistent column heights in Bootstrap across all devices

There is an HTML element containing an image and text positioned side by side using Bootstrap. Here is the code: <div class="row"> <div class="col-md-6"> <div class="avatar"> <img src="<?= get_template_directory_uri(); ...

htmlcsstwitter-bootstrapbootstrap-4

Bring the element into view by scrolling horizontally

I am facing a challenge with a list of floated left divs inside another div. This inner block of divs can be hovered over to move it left and right. Each inner div, known as 'events', has class names that include a specific year. Additionally, t ...

javascriptjqueryhtmlcss

Improper Placement of Bootstrap 5 Modal

I seem to be facing an unexpected issue where the Bootstrap 5 Modal and other components are displaying inside the sidebar menu instead of the main content area. Has anyone encountered this problem before? How can it be resolved? Here is a test example: ...

htmlcssbootstrap-5

What is causing my AJAX Contact Form to navigate away from the original page?

I configured a contact form on my website more than 5 years ago, and I vividly remember that it used to show error/success messages directly on the page within the #form-messages div. However, recently, instead of staying on the contact form page and displ ...

javascriptphphtmljqueryajax

Gorgeous Ladle: Extracting span tags from paragraph tags

I am facing an issue with extracting a span element from my total p element. Let me provide a specific example of one of the p elements I am currently parsing: <p id="p-9"> <span class="inline-l2-heading">H5N1 virus path ...

pythonhtmlbeautifulsouphtml-parsing

How can I ensure that the div remains fixed on scroll and appears directly below the navigation bar, rather than at the top of the page?

There is a div (#callback) that loads asynchronously via ajax upon submit, for updating or deleting an item. It appears as the green message box at the top of the page. Click here to see image and this is how it looks when "scrolling": Check out the scrol ...

javascriptjqueryhtmlcss

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Currently, I am working on a website with only one HTML page. The main functionality involves fetching the URL to extract an ID and then sending it to an API using an AJAX call. Upon success, the data related to the extracted ID is displayed on the page. H ...

javascriptjqueryhtmlajaxurl

HTML and CSS for an off-canvas menu

Looking to create an off-canvas menu that smoothly pushes content out of view instead of cropping it. Additionally, I want to implement a feature that allows the menu to close when clicking outside of it. I found the code for the off-canvas menu on W3Scho ...

javascripthtmlcssoff-canvas-menu

Learn how to make a contenteditable div perform tab spacing with a simple keystroke of the tab key

I've been trying to figure out how to make this contenteditable div add tab spacing when I press the tab key, but so far no luck. If anyone has a solution for this issue, please feel free to share. You can use an ID, class, or any other method to get ...

javascripthtmljquerycss

Can anyone share tips on how to ensure that text placed over an image can adapt and respond effectively

I'm facing some difficulty in ensuring that my text remains responsive alongside the image it's paired with, especially on mobile view. This is how the module appears in desktop/tablet view: https://i.sstatic.net/85mik.jpg And here is its appe ...

htmlcsstwitter-bootstrapresponsive

Dynamic arrangement of a dual-column table design that avoids aligning tables in parallel

Apologies for my novice coding skills as it's a mishmash of various email layouts, but I'm struggling to figure out why my table layout is not showing the columned tables side-by-side. The issue seems to be with the two td elements having the cl ...

htmlcssemailhtml-tablefluid-layout

The Jquery FadeIn() function seems to be triggering twice

Check out the link provided below. The purpose is self-explanatory - I am toggling between divs and aiming to fade out the current div while fading in a new one. However, my issue arises when switching between "kitchen" and "electronics", as sometimes extr ...

javascriptjqueryhtml

Acquiring inner HTML content with PHP

Looking to optimize meta tags for search and open graph. My goal is to dynamically generate the meta description tag by combining content from two specific elements in the HTML. For instance, let's say we have this snippet of code: <div class="r ...

phphtmlinnerhtml