Creating a scrollable div within a Bootstrap grid without affecting the scrollability of the overall page can be achieved by

Question

Creating a scrollable div within a Bootstrap grid without affecting the scrollability of the overall page can be achieved by

I am currently in the process of developing a web application using Bootstrap 4. The main page should remain static without any scrolling, while the child panels should be able to scroll if their content exceeds the available space.

My goal is to achieve this effect similar to the image below, without relying on jQuery as shown in the demo: https://i.sstatic.net/DWJVi.png I am looking for a CSS solution, possibly using flexbox

If I remove the jQuery code, the div extends beyond the app area, causing unwanted scrolling as depicted in the following image: https://i.sstatic.net/iS6pd.png

I attempted to add the following styles to the red div:

max-height: calc(100% - 20px);
overflow-y: auto;

However, the percentage calculation did not work as expected. Using a fixed value like max-height: calc(210px - 20px); does work but breaks when resizing the window.

Is there a straightforward (or complicated if necessary) way to achieve this layout purely with CSS?

Check out my CodePen here

css bootstrap-4 scroll flexbox

Answer 1

Answer №1

To address your issue, you may need to apply the CSS property overflow:scroll and ensure that one of the ancestor elements has a defined height for max-height to function properly. Here is an example with the necessary CSS code:

.main_container {
  width: 100%;
  /* Set the height to 100% of the viewport */
  height: 100vh;
  /* Hide overflow to disable scrolling by default */
  overflow: hidden;
  display: flex;
  background:#efefef;
}
/* Apply scroll to designated container */
.notes_scroll {
  height: 100%;
  width: 100%;
  padding: 25px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
/* Hide scrollbar */
.notes_scroll::-webkit-scrollbar {
  display: none;
}
.sec {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left {
  max-width: 30%;
  background: #dadada;
}
.right {
  flex-wrap: wrap;
}
.top {
  height: 50%;
  width: 100%;
}
.notes {
  max-width: 50%;
  height: 50%;
  background: #fff;
}
.bottom_right {
  max-width: 50%;
  height: 50%;
  background: #ccc;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="main_container">
  <div class="sec left">Left</div>
  <div class="sec right">
    <div class="sec top">Top</div>
    <div class="sec notes">
      <div class="notes_scroll">
        <h2>Notes</h2>
        <div class="notes_content">
          Many notes...<br/> Many notes... (repeated for visibility)
        </div>
      </div>
    </div>
    <div class="sec bottom_right">Bottom Right</div>
  </div>
</div>

Answer 2

To address your issue, you may need to apply the CSS property overflow:scroll and ensure that one of the ancestor elements has a defined height for max-height to function properly. Here is an example with the necessary CSS code:

.main_container {
  width: 100%;
  /* Set the height to 100% of the viewport */
  height: 100vh;
  /* Hide overflow to disable scrolling by default */
  overflow: hidden;
  display: flex;
  background:#efefef;
}
/* Apply scroll to designated container */
.notes_scroll {
  height: 100%;
  width: 100%;
  padding: 25px;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
/* Hide scrollbar */
.notes_scroll::-webkit-scrollbar {
  display: none;
}
.sec {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.left {
  max-width: 30%;
  background: #dadada;
}
.right {
  flex-wrap: wrap;
}
.top {
  height: 50%;
  width: 100%;
}
.notes {
  max-width: 50%;
  height: 50%;
  background: #fff;
}
.bottom_right {
  max-width: 50%;
  height: 50%;
  background: #ccc;
}

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="main_container">
  <div class="sec left">Left</div>
  <div class="sec right">
    <div class="sec top">Top</div>
    <div class="sec notes">
      <div class="notes_scroll">
        <h2>Notes</h2>
        <div class="notes_content">
          Many notes...<br/> Many notes... (repeated for visibility)
        </div>
      </div>
    </div>
    <div class="sec bottom_right">Bottom Right</div>
  </div>
</div>

Answer 3

Answer №2

Big thanks to @return_false for pointing me in the right direction. I noticed that their answer didn't include Bootstrap, which was a crucial element mentioned in the post title and first sentence. I prefer answers with minimal CSS, utilizing Bootstrap classes where possible. Additionally, I wanted the notes div to be scrollable while keeping the label stationary, as shown in the original Codepen (this detail may not have been clear from my description unless you referenced the Codepen).

The key lesson for me was ensuring each container has a defined height, including the main container.

.main_container {
  height: 100vh; /* occupying full viewport height */
  overflow: hidden; /* preventing scrolling overflow */
}

.notes_scroll {
  height: calc(100% - 25px); /* accounting for 'Notes' label height */
  overflow-y: auto;
}

div{
  border: 1px solid #AAA;
}

.problem-div{
  background-color: #FBB;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="grid">
  <div class="main_container">
    <div class="row h-100">
      <div class="col-sm-4">left</div>
      <div class="col-sm-8">
        <div class="row h-50">
          top
        </div>
        <div class="row h-50">
          
          <div class="col-sm-6 h-100">
            <div class="row">
              Notes
            </div>
            <div class="row problem-div notes_scroll">
              Many notes 1<br>Many notes 2<br>
              Many notes 3<br>Many notes 4<br>
              Many notes 5<br>Many notes 6<br>
              Many notes 7<br>Many notes 8
            </div>
          </div> 
          <div class="col-sm-6">bottom right</div>
        </div>
      </div>
    </div>
    
  </div>
</section>

Link to Codepen

Answer 4

Big thanks to @return_false for pointing me in the right direction. I noticed that their answer didn't include Bootstrap, which was a crucial element mentioned in the post title and first sentence. I prefer answers with minimal CSS, utilizing Bootstrap classes where possible. Additionally, I wanted the notes div to be scrollable while keeping the label stationary, as shown in the original Codepen (this detail may not have been clear from my description unless you referenced the Codepen).

The key lesson for me was ensuring each container has a defined height, including the main container.

.main_container {
  height: 100vh; /* occupying full viewport height */
  overflow: hidden; /* preventing scrolling overflow */
}

.notes_scroll {
  height: calc(100% - 25px); /* accounting for 'Notes' label height */
  overflow-y: auto;
}

div{
  border: 1px solid #AAA;
}

.problem-div{
  background-color: #FBB;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<section class="grid">
  <div class="main_container">
    <div class="row h-100">
      <div class="col-sm-4">left</div>
      <div class="col-sm-8">
        <div class="row h-50">
          top
        </div>
        <div class="row h-50">
          
          <div class="col-sm-6 h-100">
            <div class="row">
              Notes
            </div>
            <div class="row problem-div notes_scroll">
              Many notes 1<br>Many notes 2<br>
              Many notes 3<br>Many notes 4<br>
              Many notes 5<br>Many notes 6<br>
              Many notes 7<br>Many notes 8
            </div>
          </div> 
          <div class="col-sm-6">bottom right</div>
        </div>
      </div>
    </div>
    
  </div>
</section>

Link to Codepen

Creating a scrollable div within a Bootstrap grid without affecting the scrollability of the overall page can be achieved by

Answer №1

Answer №2

Similar questions

IE8 - Unable to use rgba()

Form Rolling Over

Firefox triggers VideoJS event 'ended' at the beginning

What is the best way to keep my bottom navigation bar attached to my top navigation bar?

Creating a dynamic trio of graphs with HTML5, CSS3, and Vanilla JavaScript

Leveraging webpack for CSS bundling

The iPad1 is having trouble displaying the background image, while the iPad2 is showing it perfectly

Trouble displaying complete image (ReactJS, CSS)

Could anyone assist me in positioning my personalized Context Menu beside my cursor?

Error message "HTTP500: Server error detected on aspx page is exclusive to Edge browser."

Impact of designs on the elements within components

Ways to decrease the height of the navigation bar in Bootstrap version 4.1

What steps should I take to align my header to the topmost section of the browser window?

Creating a responsive design for embedding YouTube videos in web pages

Is there a way to showcase a row of images when a button is clicked?

Tips for customizing bootstrap cards to display on a single row with four columns

Unlocking the power of setting dynamic meta content

Shrinking the image within a card row in Laravel/Bootstrap 5

Creating a stunning image fade-in effect with CSS3

Tips for creating square corner images within a bootstrap card group