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

image in the background following the header

Live Example: http://jsbin.com/opokev/54 I am currently trying to set this image as the background image while also including a header, but as you can see in the demo, the header is overlapping the image. Is there a way I can rearrange this so that the h ...

htmlcssbackground-image

Flexbox: The final element is not positioned on the right side

I have been trying to align the final item on the right side using margin-left: auto. The desired output is achieved in jsfiddle. I am using Visual Studio Code with the same code, but when viewed in Firefox, Chrome, or Edge, the item does not appear on the ...

htmlcssflexbox

Alignment of text fields in a vertical manner

How can I vertically align text input fields using CSS? <form action='<?= $_SERVER['PHP_SELF']; ?>' method='post'> <p><label for='username' class=''>Username:</label& ...

cssvertical-alignment

A guide to using the up and down keys to switch focus between div elements in a react component with TypeScript and CSS

I am currently working with a scenario where data is being displayed within different div elements, and I wish to enable the selection/focus of a specific div when users use the up/down arrow keys. While trying to achieve this functionality by using refs ...

htmlcssreactjstypescriptmaterial-ui

Utilize jQuery to insert a span element inside a paragraph element before it is appended to the DOM

My current task involves utilizing jQuery DOM elements to insert a few paragraphs into a div. The following code accomplishes this successfully: $('#detail_overlay').append($('<p />', { "class" : "detail_txt" }) .text( $(' ...

jqueryhtmlcss

Conceal navigation button within react-material-ui-carousel

After successfully incorporating the React Material UI carousel, I found it to be quite simple. However, one thing that eluded me was how to hide the buttons and only display them on hover. I tried setting the props navButtonsAlwaysVisible to false, but it ...

cssreactjsmaterial-ui

The Push Over Menu is malfunctioning and not functioning properly

I am facing an issue with pushing my menu along with the content to the right. The JS code I have is not working as expected. When I click on <div class="menu-btn toggle"></div>, the menu does not trigger. Can someone help me understand why thi ...

javascripthtmlcss

What are some ways to enhance the opacity of a Material UI backdrop?

I'm looking to enhance the darkness of the material UI backdrop as its default appearance is not very dark. My goal is to make it dimmer and closer to black in color. ...

javascriptcssreactjsmaterial-ui

Eliminating data from selection options on a HTML menu list

Currently, I am facing an issue while attempting to incorporate a menu bar into my HTML page. After adding the icons, they are displaying with both underlines and dots at the back. I have tried using text-decoration=none; to remove the underline, but unf ...

htmlcssmenunavigation

What is the counterpart of `width: max(100%, fit-content)`?

In order for my div to adjust its size based on the content if the parent div is smaller than the content, and match the size of the parent otherwise, I have been trying to achieve the first scenario by using width: fit-content, and the second scenar ...

css

Using JavaFX to showcase FontAwesome icons

I've been working on a project to create a custom icon class that can load FontAwesome icons, but I'm facing issues with reading the fontawesome-webfont.ttf file. Here is the code for creating an icon: import javafx.scene.control.Label; import ...

javacssjavafxfont-awesome

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

htmlcssiphonenext.jsfrontend

What are the various methods for incorporating icons and logos into website design?

Can anyone provide insights on the quality of logos and icons used in professional websites? I often create logos and icons using Illustrator, but when comparing them to icons on websites like those shown in the provided image and links, mine appear blurry ...

htmlcssimagegraphicsweb

Teaching etiquette to the students of Li

I'm having trouble getting two lists to display correctly on my website. I want one main navigation list that is horizontal and another sub navigation list that is vertical. To achieve this, I need to have two different classes for the list items in m ...

htmlcsshtml-lists

Tips for incorporating a dynamic CSS style sheet into a standalone xhtml document

I am faced with the task of incorporating two CSS classes into a single xhtml. For instance: Take, for example, display.xhtml, which will be utilized by two different applications, each requiring its own CSS styling. This means that if display.xhtml is ...

htmlcssxhtml

Spin the content of a div after a button click with the power of jquery and css

Looking to add interactivity to rotate text within a div upon button click using jQuery and CSS. If the user selects Rotate Left, the text will rotate to the left. Alternatively, if the user chooses Rotate Right, the text will rotate to the right. Here&a ...

javascriptjqueryhtmlcss

Discovering the content within table cells by utilizing JavaScript functions linked to specific IDs

I am currently working on a project that involves a dropdown list: <select id="itemsList" onchange="gettingList()"> <option>Please choose an option</option> <option value="50">Shampoo</option ...

javascripthtmlcssfunctionhtml5-canvas

Creating a Cross-Fade Effect in easySlider 1.7 using the Jquery Plugin

Want to achieve a cross-fade effect in easySlider 1.7 Jquery Plugin? Check out this tutorial Easy Slider 1.7 for guidance. Appreciate any help, thanks! ...

jquerycssjquery-pluginseasyslider

Is JSF h:outputStylesheet converter the solution for creating dynamic CSS?

Recently, I came across the <h:outputStylesheet/> tag with a converter attribute. I tried attaching a dummy (pass-through) converter to it, but to my surprise, nothing happened. Upon further investigation, it appears that the converter is not even in ...

javacssjsf-2

Steps to resolve background image problems

Currently encountering issues with the application where the background image is not showing up behind the login form. This problem arises while using a bootstrap template for the website. Attempted to set the background image in the .main-content div with ...

htmlcssasp.net-corefrontendweb-frontend