A 2x2 Bootstrap grid that spans the full height of the viewport, where each cell has vertical overflow set to auto

I need help creating a grid with 100% height that has the following layout:

The second row should expand to fill the remaining vertical space, even if cells C & D have limited content.

Additionally, if the content in cell D is too large, I want a vertical scrollbar to appear only for that cell. Here's an example:

Any tips on how to achieve this? Here's what I currently have (https://jsfiddle.net/z8742qdo/28/):

  
  <body class="vh-100">
    <div class="h-100 container-fluid">
      <div class="row">
        <div class="col-10 bg-warning">
          A
        </div>
        <div class="col-2 bg-primary">
          B
        </div>
      </div>
      <div class="row">
        <div class="col-2 bg-danger">
          C
        </div>
        <div class="col-10 bg-success">
          D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br>
          with<br>scrollbars<br>only<br>
        </div>
      </div>
    </div>
  </body>
cssbootstrap-5

Answer №1

To create the layout, implement flexbox by using .flex-column on the .container-fluid, and then apply .flex-grow-1 to the second .row to ensure it expands to occupy all available space.

Regarding the overflow issue, use .overflow-auto on the scrollable division and don't forget to add .overflow-hidden to the immediate parent .row.

<html>

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95f7fafae1e6e1e7f4e5d5a0bba6bba7">[email protected]</a>/dist/css/bootstrap.min.css">
</head>

<body class="vh-100">
  <div class="h-100 container-fluid d-flex flex-column ">
    <div class="row">
      <div class="col-10 bg-warning">
        A
      </div>
      <div class="col-2 bg-primary">
        B
      </div>
    </div>
    <div class="row flex-grow-1 overflow-hidden">
      <div class="col-2 bg-danger h-100">
        C
      </div>
      <div class="col-10 bg-success h-100 overflow-auto">
        D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br> with<br>scrollbars<br>only<br> D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br> with<br>scrollbars<br>only<br> D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br>        with<br>scrollbars<br>only<br> D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br> with<br>scrollbars<br>only<br> D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br> with<br>scrollbars<br>only<br>
        
      </div>
    </div>
  </div>
</body>

</html>

Answer №2

<body class="vh-100">
<div class="h-100 container-fluid">
  <div class="row">
    <div class="col-10 bg-warning">
      A
    </div>
    <div class="col-2 bg-primary">
      B
    </div>
  </div>
  <div class="row">
    <div class="col-2 bg-danger">
      C
    </div>
    <div class="col-10 bg-success" style='max-height:100px; overflow-y: auto;'>
      D<br>The<br>content<br>of<br>this<br>cell<br>should<br>overflow<br>
      with<br>scrollbars<br>only<br>
    </div>
  </div>
</div>

Adjust the max-height of cell D and set overflow-y: auto to show scrollbar only when contents exceed the specified height.

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

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

javascripthtmlcss

Do you think there is a more optimal method for achieving this?

Here is the core concept: I developed it in a fluid manner like this: Do you have any suggestions for improving the way I implemented this? ...

csshtml

Using plain JavaScript (without any additional libraries like jQuery), you can eliminate a class from an element

I'm attempting to locate an element by its class name, and then remove the class from it. My goal is to achieve this using pure JavaScript, without relying on jQuery. Here is my current approach: <script> var changeController = function() { ...

javascripthtmlcss

Utilizing Isotope JS on your Wordpress website

I'm in the process of integrating the .js plugin, Isotope, into my Wordpress installation. It should be positioned at the bottom of this page: To achieve this, I am referring to an example on codepen: https://codepen.io/desandro/pen/mEinp The script ...

javascriptjquerycsswordpress

Why do CSS media queries stop working at exactly 5 distinct resolution sizes? This seems odd

Just completed my first JavaScript project, a 3D website using three.js. However, right before publishing, I realized that the dimensions and contents were not optimized for viewing on browsers other than 1920x1080. So, I delved into setting DevicePixelRat ...

htmlcssmedia-queries

The Handsontable popup autocomplete editor is unfortunately truncated by the horizontal scrollbar

I have implemented an autocomplete feature on all columns in my project. However, I am facing an issue where the autocomplete editor gets cut off by the horizontal scrollbar. You can see the problem demonstrated in this jsfiddle link. Here is some code re ...

javascriptjquerycsshandsontable

Is it possible to divide a column in an HTML table into two separate

I am currently working with an array of elements that I need to iterate over. For each element, I create a <td></td> tag. When dealing with 10 elements, it results in a table with one column and 10 rows. Is there a method, using either HTML o ...

javascripthtmlcss

Troubleshooting: CSS3 transform issue unresolved

I'm attempting to add a 10-degree rotation to my menu items. While this CSS effect works in Firefox, I can't seem to get it to work in Chrome and Safari. I already know that IE doesn't support this particular CSS3 property, so that's no ...

htmlcss

Provide the email address to use on the forum

Is there a way to code an email address in HTML that will be invisible and undetectable by forums? Thank you in advance. I'm looking for a more advanced solution like this one! <h>mariaburkke76</h><h><h><h><h>< ...

javascriptphpcsshtml

The bottom margin fails to function as expected

I've been trying to position a loading image at the bottom right of the page, but everything seems to be working except for the margin-bottom. <div id="preload"> <div align="right" style="margin-bottom:40px; margin-right:50px;"> ...

htmlcssalignmentmargin

Ways to create an overlapping effect for 3 elements using CSS

There are 3 elements in my setup: <div class="foo"></div> <div class="bar"></div> <div class="foobar"></div> I am looking to have .foo overlap .bar, .bar to overlap .foobar, and .foobar to overlap .foo. This is the de ...

htmlcssz-index

Solved the issue of inconsistent element height and jumping on mobile devices during scrolling

Problem persists with the fixed element at the bottom of my mobile device when I scroll. It seems that the height is recalculated each time due to an increase in document height on mobile devices. The issue appears to be related to the address bar fading ...

htmlcss

I'm puzzled as to why a scroll bar materializes

I recently encountered an interesting issue while working on my responsive web design project. Upon resizing the browser to a width of 615px or less, a horizontal scroll bar unexpectedly appeared. It's puzzling as to which element is causing this prob ...

cssscrollbarresponsive-designhorizontal-scrolling

Display a unique button and apply a strike-through effect specifically for that individual list item

I've encountered an issue with my code that is causing problems specifically with nested LI elements under the targeted li element: $('#comment-section .comment-box a#un-do').hide(); $('#comment-section ul li[data-is-archived="true"]& ...

javascriptjqueryhtmlcss

What is the best way to ensure that each box remains separate and does not overlap with the box next to it?

Just an FYI - styling in React using CSS is quite similar to regular CSS. Each individual box has its own code snippet: export const CardWrapper = styled.div` display: flex; flex-direction: column; align-items: center; border-radius: 4px; backg ...

cssreactjsflexbox

Swap the content of one div with another div using client-side code only

Currently, I am in the process of developing my personal website. To enhance user experience, I have implemented a vertical navigation bar on the left side of the page. My goal is to replace the content of a specific div with content from other HTML files ...

javascriptjqueryhtmlcss

Disabling the ability to edit the rightmost portion of an input number field

I am looking for something similar to this: https://i.stack.imgur.com/ZMoNf.jpg In this case, the % sign will be shown in the input field by default and cannot be changed or removed. The user is only able to modify the number to the left of the % sign. P ...

javascriptjquerycsshtml

Determine the width of a div by utilizing SASS and following a series of incremental steps

Let's discuss the current scenario: I have a parent div that consists of multiple child elements which vary in number. (2, 3, 4) The goal is to determine the appropriate width for each step element dynamically: For 2 steps: 50% For 3 steps: 33.3% ...

csssass

AngularJs - Customizable dynamic tabs that automatically adapt

Below is the HTML code snippet: <div> <ul data-ng-repeat ="tab in tabs"> <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"> </li> </ul> </div> As shown ...

javascripthtmlcssangularjstwitter-bootstrap

What is the best way to adjust the placement of this object so it is anchored to the left side?

https://i.sstatic.net/k8aF1.png I'm struggling to position one of my divs more to the left within a flex container. No matter what I try, changing the class of the div doesn't seem to have any effect. Here's the code snippet: import React f ...

cssreactjs