Achieve full height for div without causing it to expand (utilize scrollbar for overflow)

I am looking to achieve a specific layout for my webpage, as shown in the image below:

The layout depicted in the image above is created using the following HTML and bootstrap classes:

        <div className="ContentWrapper d-flex mh-100 flex-row h-100">
            <div className="ContentBody flex-column flex-fill">
                <div className="ContentHeader p-3 w-100">
                    <h2>Header</h2>
                </div>
                <div className="ContentMain w-100">
                    <h2>Scrollable div, should fill height, but not more than that</h2>
                </div>
            </div>
            <div className="Sidebar h-100">
                <h2>Sidebar content</h2>
            </div>
        </div>

Relevant CSS:

.ContentWrapper {
    background-color: red;
}

.ContentBody {
    background-color: blue;
}

.ContentHeader {
    background-color: yellow;
}

.ContentMain {
    background-color: purple;
    flex: 1;
}

.Sidebar {
    background-color: green;
    width: 500px;
}

However, I am facing an issue where the purple section's height keeps increasing when there is too much content, and I would like to add a scrollbar to that component to control the height.

Additionally, I have heard that some flex properties behave differently in Chrome and Firefox. I want to ensure that my webpage functions consistently across both browsers.

Answer №1

To adjust the height of the ContentWrapper, you can remove the h-100 class and instead apply height: 100vh to it. Transform your ContentBody into a flexbox by including the `d-flex- class. Refer to the demo below for a visual representation along with detailed explanations:

.ContentWrapper {
  background-color: red;
  height: 100vh; /* ADDED */
}

.ContentBody {
  background-color: blue;
}

.ContentHeader {
  background-color: yellow;
}

.ContentMain {
  background-color: purple;
  flex: 1;
  overflow-y: auto; /* ADDED */
}

.Sidebar {
  background-color: green;
  width: 500px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="ContentWrapper d-flex mh-100 flex-row"> <!-- removed h-100 class -->
  <div class="ContentBody d-flex flex-column flex-fill"> <!-- added d-flex class -->
    <div class="ContentHeader p-3 w-100">
      <h2>Header</h2>
    </div>
    <div class="ContentMain w-100">
      <h2>Scrollable div, should fill height, but not more than that</h2>
    </div>
  </div>
  <div class="Sidebar h-100">
    <h2>Sidebar content</h2>
  </div>
</div>

Answer №2

Seek and you shall find an existing solution... I recently completed a codepen that utilizes a more flexible approach using flexbox.

<div class="ContentWrapper d-flex mh-100 flex-row h-100">
  <div class="ContentBody flex-column flex-fill d-flex">
    <div class="ContentHeader p-3 w-100">
      <h2>Header</h2>
    </div>
    <div class="ContentMain w-100 flex-fill overflow-auto">
      <h2>Scrollable div
    </h2>
    </div>
  </div>
  <div class="Sidebar h-100 flex-shrink-0">
    <h2>Sidebar content</h2>
  </div>
</div>

https://codepen.io/ramseyfeng/pen/drWNYQ

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

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

I have a main HTML page and I need to insert a dynamically generated list from a template in another HTML file that I created. The template for each item in the list is located on a separate HTML page. My goal is to create multiple instances of this HTML ...

Utilizing CSS pseudo-elements in selectors with Scrapy

Is it possible to use the CSS text-transform property directly within Scrapy selectors? Ex: .css("::text-transform: capitalize").extract() The current method returns capitalized data, but can we apply CSS properties like text-transform to modify ...

Center column with header and footer flanking each side

Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version). This visual representation is ...

Is there a way to retrieve JSON data from a different domain and incorporate it into my own website?

I am attempting to utilize JSON data from "" and display the data on my website. My goal is to extract the JSON field name "Stats" and retrieve the sub-field name '\"v\"'. You can refer to the documentation provided by purpleair here: h ...

Challenges with parsing JSON using jQuery

I am attempting to retrieve data from a page that returns JSON in order to store it in an array. The current code is functional, but I am encountering difficulties when trying to pass the variable (which should contain the content) into the jQuery.parseJSO ...

Customizing the style of react-select is essential for creating a unique and visually appealing user experience

I am looking to maintain the visual style of my input fields to match that of a react-select component. I have been advised to use styled-components, yet I am uncertain about which styles need to be adjusted in order to achieve the desired outcome. Ideally ...

A method for highlighting duplicate rows in a DataTable by formatting them with the same color

I am currently utilizing the DataTable plugin to display rows in a table. I would like to highlight duplicate rows in the same color scheme. Can someone please assist me with this issue? In the example below, the entry for Black Winters is duplicated. I ai ...

How to Access a PHP Variable within a JavaScript Function Argument

.php <?php $timeArray = [355,400,609,1000]; $differentTimeArray = [1,45,622, 923]; ?> <script type="text/javascript"> var i=0; var eventArray = []; function generateArray(arrayName){ eventVideoArray = <?php echo json_encode(arrayName); ...

Encountering a predicament when attempting to retrieve an image from an alternative

[index.jsp][5] style.css [problem][6] [folder hierarchy][7] Although everything runs smoothly when the file is located in the css directory, it fails to show any images if placed in the images folder. Kindly provide assistance. ...

A guide on aligning a CSS item perfectly in the center using absolute positioning

I have been searching for a solution to my problem, but all I found were answers that addressed similar issues in a slightly different way. My challenge involves placing multiple smaller images on top of a larger background image. To achieve this, I utili ...

Tips for creating two interchangeable lists and saving the selected items when the selection process is finished

Utilizing jQuery and specifying dual selectors together, I attempt to reference each variable in the following code: UL_HeadersToOmit - represents the list to select from UL_dropedCols - indicates the list to be passed as a reference to the subsequent fu ...

Which is more optimal for importing CSS - using the link tag or style tag?

Is this a matter of personal preference or is there a specific advantage to using one method over the other? <link href="main.css" rel="stylesheet" type="text/css"> versus <style type="text/css> @import url('main.css'); </style& ...

Learn the ins and outs of utilizing *ngIf in index.html within Angular 8

Can anyone explain how I can implement the *ngIf condition in index.html for Angular2+? I need to dynamically load tags based on a condition using the *ngIf directive, and I'm trying to retrieve the value from local storage. Below is my code snippet b ...

"Keeping your HTML content up-to-date with AngularJS dynamic updates

I've noticed that when I upload changes to my AngularJS HTML partial files, there is a caching issue where the old data is displayed. It takes a few refresh actions before the changes become visible. Is there a way to make these changes appear immedi ...

I'm having trouble with Gutters GX and GY not functioning properly in Bootstrap, HTML, and CSS

I attempted to incorporate gutters into my Bootstrap grid layout, however, they are not showing up as expected. I am following the guidelines provided on the Bootstrap documentation, but for some reason, the gutters are not appearing. <!DOCTYPE html> ...

The appearance of an SVG image inside an absolutely positioned div varies between Firefox and Chrome

The web page I am working on can be found at the following link: This webpage consists of text and SVG images, with the hex bolts positioned over specific areas of the text. Achieving this effect requires absolute positioning within a relatively positione ...

Tips for positioning a modal in the center specifically for zoomed-in mobile devices

I created a modal that uses the following function to center itself: center: function() { var top=Math.max($window.height() - $modal.outerHeight(),0) / 2; var left=Math.max($window.width() - $modal.outerWidth(),0) / 2; $modal.css({ ...

Unable to retrieve the textContent of an HTML element, however, it is possible to log it

Currently, I'm attempting to make changes to a table on the following website. I've inserted the script below into the console of both Chrome and Firefox: let skins = [ "button" //simplified ]; skins.forEach((skin)=>{ document.que ...

Is it possible to modify the background-image using Typescript within an Angular project?

I have been struggling to change the background image in my Angular project using Typescript. I attempted to make the change directly in my HTML file because I am unsure how to do it in the CSS. Here is the line of code in my HTML file: <div style="ba ...

Can you help me identify the reason behind a page displaying a temporary horizontal scrollbar?

While browsing the following page in Google Chrome: A horizontal scrollbar appears briefly during page load. It seems that something hidden below the fold is causing this issue, but I haven't been able to identify the exact cause. EDIT:- Watch a v ...