Bootstrap grid columns cannot properly handle overflowing content

Question

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3

I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow.

Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to keep the navigation bar, main content, and footer visible at all times.

The container containing images needs to be scrollable, hence the use of the overflow: scroll style. However, it appears to break out of its parent element, causing disruptions on the page layout. I suspect this issue may stem from the grid structure (utilizing the row and col classes).

<div class="vh-100 d-flex flex-column">
  <div>
    <h1>Navigation bar</h1>
  </div>
  <div class="flex-fill d-flex flex-column">
    <h1>Main content</h1>
    <div class="flex-fill d-flex flex-column">
      <div class="row flex-fill">
        <div class="col-6">
          <p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto consequuntur harum hic inventore laborum maiores necessitatibus nihil nobis officia optio perspiciatis quaerat quas quo reprehenderit rerum sequi, veritatis, vitae?</p>
        </div>
        <div class="col-6">
          <div class="d-flex flex-column flex-wrap gap-2 overflow-scroll">
            <div class="border" style="background-color: green; padding: 5px; margin: 5px;"><h5>Description</h5><img src="http://localhost:4545/blabla.png"></div>
...
          </div>
        </div>
      </div>
      <p>&Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum itaque nemo placeat sed voluptatum! Adipisci beatae debitis deleniti dignissimos doloremque, doloribus eius facere illo in, nisi nostrum quia repudiandae sit!</p>
    </div>
  </div>
  <div>
    <h1>Footer</h1>
  </div>
</div>

html css flexbox overflow bootstrap-5

Answer 1

Answer №1

If you're finding it challenging to implement an overflow-scroll feature in a Flex layout, you're not alone. However, with a good understanding of how Flex behaves, achieving this effect is definitely possible. Let's walk through the steps to help you achieve your desired outcome.

Let's get started.

Breaking Down the CSS

In our HTML structure, we have three main sections: #header, #main, and #footer.

To achieve the desired behavior, it's recommended to first establish fixed heights for elements like #header and #footer, and then calculate the remaining viewport height to be applied to #main.

We can simplify this process by using CSS variables. We define variables for the heights of header and footer within the :root selector to make them globally accessible throughout the stylesheet.

:root {
  --headerHeight: 100px;
  --footerHeight: 100px;
}

We then compute the total height needed, which we label as totalHeight. By utilizing the calc() function, we sum up the values of headerHeight and footerHeight variables using the var() function.

Since both heights are set at 100px, the totalHeight will equate to 200px.

--totalHeight: calc( var(--headerHeight) + var(--footerHeight) ) //200px

This approach makes it easier to adjust the headerHeight without manually updating the totalHeight value, providing flexibility in design modifications.

Next, we assign these calculated variables to the #header and #footer elements respectively.

Now, for setting the height of the remaining content area, #main, simply subtract the totalHeight from the full viewport height (100vh).

#main {
  height: calc(100vh - var(--totalHeight));
}

Understanding the HTML Structure Using Bootstrap

The pivotal part of the layout can be summarized as:

<div class="container d-flex flex-column" id="main">
    <div class="row flex-grow-1 overflow-auto">

We begin by transforming the container into a flex environment with the .d-flex class. To vertically stack the content, we employ the .flex-column class, automatically establishing a column-based flow.

The first row inside functions as a flex item due to its direct parentage under the flex container. Applying the .flex-grow-1 class ensures this row expands to fill available space while preserving the required space for other rows.

This setup guarantees responsive behavior out of the box!

To introduce a scrollbar only when necessary, we incorporate the .overflow-auto class on this specific row.

Check out the code snippet below. For optimal viewing experience, utilize the option to display it in full page mode, open developer tools, and experiment with the responsive settings to observe how the scroll functionality kicks in as the viewport size diminishes!

Additionally, access the provided JSFiddle link for more insights.

Other Approaches

If the heights of your header and/or footer are dynamic rather than fixed, consider these alternatives:

Apply a max-height to the overflowing element;
Utilize JavaScript to dynamically determine the combined height of header and footer, redistributing the remaining viewport height to #main.

Answer 2

If you're finding it challenging to implement an overflow-scroll feature in a Flex layout, you're not alone. However, with a good understanding of how Flex behaves, achieving this effect is definitely possible. Let's walk through the steps to help you achieve your desired outcome.

Let's get started.

Breaking Down the CSS

In our HTML structure, we have three main sections: #header, #main, and #footer.

To achieve the desired behavior, it's recommended to first establish fixed heights for elements like #header and #footer, and then calculate the remaining viewport height to be applied to #main.

We can simplify this process by using CSS variables. We define variables for the heights of header and footer within the :root selector to make them globally accessible throughout the stylesheet.

:root {
  --headerHeight: 100px;
  --footerHeight: 100px;
}

We then compute the total height needed, which we label as totalHeight. By utilizing the calc() function, we sum up the values of headerHeight and footerHeight variables using the var() function.

Since both heights are set at 100px, the totalHeight will equate to 200px.

--totalHeight: calc( var(--headerHeight) + var(--footerHeight) ) //200px

This approach makes it easier to adjust the headerHeight without manually updating the totalHeight value, providing flexibility in design modifications.

Next, we assign these calculated variables to the #header and #footer elements respectively.

Now, for setting the height of the remaining content area, #main, simply subtract the totalHeight from the full viewport height (100vh).

#main {
  height: calc(100vh - var(--totalHeight));
}

Understanding the HTML Structure Using Bootstrap

The pivotal part of the layout can be summarized as:

<div class="container d-flex flex-column" id="main">
    <div class="row flex-grow-1 overflow-auto">

We begin by transforming the container into a flex environment with the .d-flex class. To vertically stack the content, we employ the .flex-column class, automatically establishing a column-based flow.

The first row inside functions as a flex item due to its direct parentage under the flex container. Applying the .flex-grow-1 class ensures this row expands to fill available space while preserving the required space for other rows.

This setup guarantees responsive behavior out of the box!

To introduce a scrollbar only when necessary, we incorporate the .overflow-auto class on this specific row.

Check out the code snippet below. For optimal viewing experience, utilize the option to display it in full page mode, open developer tools, and experiment with the responsive settings to observe how the scroll functionality kicks in as the viewport size diminishes!

Additionally, access the provided JSFiddle link for more insights.

Other Approaches

If the heights of your header and/or footer are dynamic rather than fixed, consider these alternatives:

Apply a max-height to the overflowing element;
Utilize JavaScript to dynamically determine the combined height of header and footer, redistributing the remaining viewport height to #main.

Bootstrap grid columns cannot properly handle overflowing content

Answer №1

Similar questions

The mouseover and mouseleave functions remain active even during window resizing

Checking links with AngularJS and HTML 5

jquery - adjust floating section height

Load link dynamically using the rel attribute

Element on webpage "Expands" When Scrolled into Visibility

Using html as a template parameter in django

What is the best way to implement a sub-menu using jQuery?

Approaching fashion from a new angle: incorporating perspective into

What could be causing the problem with my CSS background-image being referenced correctly?

Altering the appearance of a component that is currently selected and in use

Design a CreateJS/EaselJS website, comprised of multiple web pages, that is not focused on gaming

Strong tags are not functioning properly within paragraph tags in Firefox

List the acceptable favicon formats for Internet Explorer version 10 and above

The checkbox appears unchecked, yet the content normally associated with a checked checkbox is still visible

Using a For Loop in VueJS with TypeScript for an array of objects

The user can witness the appearance of a scrollbar when utilizing the

Ways to display and conceal menu depending on initial view and scrolling

The alignment of text in the flex column is incorrect on the right side

I'm having difficulty grasping how this CSS is being used

Enhancing jQuery UI Tabs with HoverIntent