Tips for ensuring that flex-box children can scroll properly

I'm having trouble getting the content to scroll correctly while dealing with nested flex-box structures. Below is my CSS code:

html,body,#root{
   width:100%;
   height:100%;
   padding:0;
   margin:0;
}
.flex-fill{
   height:100%;
   width:100%;
   display:flex;
   align-items:stretch;
}
.flex-fill>div:last-child{
   flex-grow:1;
}
.flex-col{
   flex-direction:column;
}
<div id='root'>
  <div class='flex-fill flex-col'><!--actually scrolling div-->
     <div style="flex:0 0 35px"><h1>main title</h1></div>
     <div>
        <div class='flex-fill flex-col'>
           <div style="flex:0 0 30px"><h2>subtitle</h2></div>
           <div class='flex-fill'>
              <div style="flex:0 0 30%">...left side nav list...</div>
              <div class='flex-fill flex-col'>
                 <div style="flex:0 0 25px">...data header...</div>
                 <!--I hope the content of this div is scroll-able-->
                 <div style="overflow-y:scroll">...data list...</div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>

The data list within the innermost div is very lengthy and I want it to be scrollable. However, the current code makes the entire content within the root div scroll. Is my understanding of flex or overflow incorrect? How can I modify the code to only enable scrolling for the data list section?

cssscrollflexboxoverflow

Answer №1

Update to maintain the structure of your HTML. Inline styles have been removed and replaced with classes:

html,body{
   height:100%;
   padding:0;
   margin:0;
}
#root {
  height: 100%;
display: flex;
}
.flex-fill{
   height:100%;
   display:flex;
   align-items:stretch;
}
.flex-col{
   flex-direction:column;
   display: flex;
   flex: 1 0 0;
   height: 100%;
}
.flex-row{
   flex-direction:row;
   display: flex;
   height: 100%;
}
.scrolling-div {
height: 100%;
overflow-y: scroll;
}
<div id='root'>
  <div class='flex-fill flex-col'>
     <div><h1>main title</h1></div>
     <div class="flex-col">
        <div class='flex-col'>
           <div><h2>subtitle</h2></div>
           <div class="flex-row">
              <div>...left side nav list...</div>
              <div class='flex-col'>
                 <div>...data header...</div>
                 <!--Now Scrolls-->
                 <div class="scrolling-div">
 ...scrolling data list...<br />
 ...scrolling data list...<br />
 ...scrolling data list...<br />
 ...scrolling data list...<br />
 </div>
              </div>
           </div>
        </div>
     </div>
  </div>
</div>

Answer №2

Hello @Welson Zhong! Take a moment to check out the functioning snippet below. Make sure to view it in Full page mode for a better understanding. I hope this clears things up for you :)

Remember: Too much flex can sometimes be counterproductive, which was the issue with your code.

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  flex-direction: column;
  font-family: sans-serif;
  font-size: 18px;
}
.main {
  display: flex;
  flex-direction: row;
  flex: 1 0 auto;
}
.sidebar {
  flex: 1 auto;
}
.content {
  display: flex;
  flex-flow: column nowrap;
  flex: 3 0px;
}
h1,h2,.data-header {
  flex: none;
}

/* Additional CSS for visual representation only */
.main *:not(.content) {
  box-shadow: inset 0 0 0 1px #ccc;
  padding: 10px;
}
<h1>main title</h1>
<h2>sub title</h2>
<div class="main">
  <div class="sidebar">
    ...left side navigation list...
  </div>
  <div class="content">
    <div class="data-header">...data header...</div>
    <div style="overflow-y:scroll; flex: auto">...data list...</div>
  </div>
</div>

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

Is it possible to arrange elements in CSS based on their attribute values?

I need to arrange a list of images in ascending order based on the index attribute using CSS. The challenge is that the index values will change dynamically and new images will be added through Ajax, so I want them to automatically update in the correct or ...

htmlcssimagesorting

Identifying sluggish hardware or unresponsive browsers using JavaScript

My site features numerous CSS animations and transitions that run very slowly on specific browsers and older hardware. I want to avoid user-agent sniffing; is there a way to identify browsers or hardware configurations using JavaScript or a JS library, and ...

cssbrowserjavascript

When the progress bar is clicked, the background color changes and then changes back again

https://www.w3schools.com/code/tryit.asp?filename=FG1ZE0NJ4ZX7 https://i.stack.imgur.com/Bnd0k.png I have created a progress bar that resembles the screenshot provided. When I hover over it, the color changes to green. However, I am looking for assistanc ...

javascripthtmlcsstwitter-bootstrap

How to customize a dropdown menu with the size property?

Can anyone help me with styling a select box that uses the size attribute? Most tutorials only cover single-item select boxes. Has anyone dealt with styling select boxes with the size attribute before? Here's an example of what I'm trying to acc ...

javascriptjqueryhtmlcss

What is the best way to hide the drop down menu after it has been opened by clicking on the same element

My attempt to create a code that toggles a drop-down menu on every click and closes any other open menus is not working as expected. The menu doesn't close upon clicking it again. $(document).ready(function(){ "use strict"; $(".dropdown").hi ...

jqueryhtmlcssdrop-down-menu

What is the best way to ensure my image adjusts its width and height responsively?

How can I make my image responsive to the size of the container, adjusting not just the width but also the height to fit in a container with a max-width of 1300px? I have created a test image with dimensions of 400px height and 1300px width. Take a look a ...

css

iOS devices do not support the add/removeClass function

This code functions properly on desktop browsers, but encounters issues when used on iPhones. Furthermore, the script mentioned below seems to be causing problems specifically on iPhone devices. var $event = ($ua.match(/(iPod|iPhone|iPad)/i)) ? "touchstar ...

javascriptjqueryhtmlcssiphone

How can I modify the orientation of the arrow and switch sides in a dropdown submenu?

I am working on creating a menu with dropdown-submenu functionality using CSS. .dropdown-menu { float:left; } .left-submenu { float: none; } .left-submenu > .dropdown-menu { border-radius: 6px 0px 6px 6px; left: auto; margin-lef ...

csshtmldrop-down-menubootstrap-modal

iOS fixed positioning and scrolling

One of the current challenges we are facing involves implementing an action button similar to the one found in GMail for adding new content. This button needs to remain fixed during scroll. Here is the HTML code: <div class="addButton actionButton" on ...

javascriptioscsscss-position

Tips on updating CSS styles for navigation bar links in real time

Currently, my homepage displays a CSS content hover effect when the user interacts with the icons. However, I am facing an issue where all icons show the same text "home" on hover. How can I customize the text output for each individual icon/link? Your hel ...

htmlcsssass

Create custom styles for Android applications using CSS or themes programmatically

As I work on developing an application, I am interested in implementing a unique approach... To retrieve a CSS file from the server and apply it to the activity layout. To create a string file for styling or theming and integrating it into the layout. I ...

androidcssthemes

The art of uploading images with HTML and CSS

Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...

htmlcssimage

Transforming button alignment from vertical to horizontal in Bootstrap based on the screen size of the device

My website features a series of vertically aligned buttons on the sidebar, styled using the following CSS: CSS: .sidebar { position: fixed; left: 20px; top: 5%; width: 120px;} .sidebar .icons { font-size: 30px; margin: 21px; } ...

htmlcsstwitter-bootstrap

Utilizing Javascript Conditional for Substitution

Currently, I have a JavaScript function that replaces all links with registration messages: <script> function replaceLinks() { var links = document.querySelectorAll('.restore a:link'); for (var i = 0; i < links.length; i++) { ...

javascriptcss

Is there a combination of 'auto' and 'none' values in any CSS properties?

Is it safe to assume that if a property is set to auto, it cannot have the value of none, and vice versa? Or if a property has none, can it not have auto as well? I understand that these values have distinct meanings, but I am curious if this concept has ...

cssdefault

Having trouble getting SCSS to function properly? (Updated Code)

Transitioning from CSS to SCSS is my current project. I decided to make the switch because of SCSS's nesting capabilities, which I find more convenient for coding. However, I'm facing some challenges getting it to work properly. In my regular CSS ...

htmlcsssass

How long does jQuery animation last until completion?

Within my project, I am utilizing the animationComplete function from the jQuery mobile library. You can find this function at The animation in my project involves a sequence of objects with various tasks to be executed at each point of the animation. The ...

javascriptjquerycssjquery-mobile

Is the mobile site displaying CSS pixels in the physical pixel resolution?

I am struggling to grasp the problem and finding it challenging to explain it clearly, so I have attached a picture depicting the issue. https://i.stack.imgur.com/E9Gzj.png My current approach involves using ratios of 100% and 100vw for element widths. D ...

csswebmobile-websitepixel

swap between style sheets glitching

My website features two stylesheets, one for day mode and one for night mode. There is an image on the site that triggers a function with an onclick event to switch between the two stylesheets. However, when new visitors click the button for the first ti ...

javascripthtmlcss

Steps for implementing a Toggle Navigation Bar in CSS

I'm looking to implement a show/hide navigation menu similar to the one showcased in this inspiration source: Code Snippet (HTML) <div id="menus"> <nav id="nav"> <ul> <li><a href="#">HOME</a></li> <li& ...

javascripthtmlcss