The content within a container that has flex-grow: 1 is exceeding its bounds instead of being able to scroll

I am currently facing an issue with a container that is set to grow within a fixed size container and I need help figuring out how to make the content wrapper element scrollable.

Specifically, the flex-grow container houses a div that is larger than the container itself. How can I ensure that the content-wrapper stays within its bounds and becomes scrollable when needed?

Your assistance on this matter would be greatly appreciated!

.main-content-container {
    padding: 0 20px;
    display: flex;
    flex-flow: column nowrap;
    grid-gap: 10px;
    height: 550px;
    background: green;
}

.sub-content-container {
  width: 300px;
  background: grey;
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
}

.content-wrapper {
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
  overflow: auto;
}

.content-container {
  height: 10000px;
  background: #555;
}

body {
  background: black;
  color: white;
  padding-bottom: 30px;
}
<div class='main-content-container'>
  <p>stuff</p>
  <div class='sub-content-container'>
    <p>header</p>
    <div class='content-wrapper'>
       <div class="content-container">I WANT THIS TO STAY WITHIN THE CONTENT-WRAPPER</div>
    </div>
  </div>
</div>

htmlcssflexbox

Answer №1

Typically, in order for the overflow property to take effect, the container must have an overflow condition. This usually requires a fixed length on the container. Without a fixed length (such as height or width), there is no basis for triggering an overflow. Since the flex-grow property does not establish a fixed length, it is ineffective.

However, setting a fixed height on the container may not be suitable if you desire a flexible layout.

To address these challenges, one solution is to set the container's height to 1px.

  • This establishes a fixed length;
  • It does not interfere with dynamic lengths; and,
  • The flex-grow property will expand the container to full height

Yet, another issue arises when dealing with a nested flex container in column direction that appears to disregard the overflow property. This could be due to nesting within a flex formatting context. If possible, reverting that container back to a block formatting context might resolve this concern.

To implement these changes in your code:

.content-wrapper {
  height: 1px; /* new */
  flex-grow: 1;
  /* display: flex; */
  flex-flow: column nowrap;
  overflow: auto;
}


.main-content-container {
    padding: 0 20px;
    display: flex;
    flex-flow: column nowrap;
    grid-gap: 10px;
    height: 550px;
    background: green;
}

.sub-content-container {
  width: 300px;
  background: grey;
  flex-grow: 1;
  display: flex;
  flex-flow: column nowrap;
}

.content-wrapper {
  height: 1px; /* new */
  flex-grow: 1;
  /* display: flex; */
  flex-flow: column nowrap;
  overflow: auto;
}

.content-container {
  height: 10000px;
  background: #555;
}

body {
  background: black;
  color: white;
  padding-bottom: 30px;
}
<div class='main-content-container'>
  <p>stuff</p>
  <div class='sub-content-container'>
    <p>header</p>
    <div class='content-wrapper'>
       <div class="content-container">I WANT THIS TO STAY WITHIN THE CONTENT-WRAPPER</div>
    </div>
  </div>
</div>

View the jsFiddle demo here

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

margin leakage: potential misalignment caused by nested DIV elements

I am experiencing a strange issue where the margin of a nested DIV is "leaking" out of its parent container. For a better understanding, check out this test case: http://jsbin.com/ibaze The outer wrapper (highlighted in red) does not align perfectly a ...

htmlcss

"CodeSandbox encountered an issue where PostCSS received an undefined value instead of the expected CSS

I successfully uploaded a React project to CodeSandbox locally by utilizing the codesandbox ./ terminal command. If you want to access the CodeSandbox project, you can find the link here. However, when trying to view the project in the pane, I encountere ...

cssreactjscodesandbox

Using the Strikethrough Feature in React

Is it possible to apply a strikethrough effect to a checkbox's label text when toggled on and off? In my system development process, I've utilized various methods. What modifications should be made in the fComplete method for this feature to wor ...

javascripthtmlcssreactjs

enhancing the appearance of the initial sentence in the closing passage through CSS styling

Is there a way to make only the first sentence in the final paragraph bold using CSS? Specifically, I would like to add extra padding to the top of this last paragraph so that it wraps around an image. However, when I increase the bottom padding of the flo ...

htmlcsscss-selectors

Animate the jQuery menu to slide both upwards and downwards, as well as shift the inner divs to the right

I'm facing a jquery issue and could use some assistance. I am trying to achieve the following: Add a class "active" to style tags when they are active. Slide up/down vertically within a div (#information - containing "About" and "Contact"). Slide le ...

jqueryhtmlcssanimationmenu

Submitting HTML elements from a webpage using PHP

Is there a way to store an entire HTML table as a single record in my database? I would like the following table data to be submitted when I click the submit button: <table> <tr><td>Items</td></tr> </table> Can thi ...

htmlpost

Tips for renaming input file before uploading to a new destination

Instead of using the original name, I would like to replace the image that the user wants to upload with my own pattern. I understand that it's preferable to change the file name on the server, but unfortunately, I am unable to do so for certain reaso ...

javascripthtmlreactjs

Numerous Kendo windows are layered on top of each other, yet the text divisions within them remain distinct

I am currently working on a project that involves laying out multiple Kendo windows in rows. Specifically, I need to display 4 windows in each row and have them shift left when closed. My framework of choice is Bootstrap 3. Everything works as expected w ...

javascriptjqueryhtmlkendo-uitwitter-bootstrap-3

What could be causing the error.status value to not be displayed on my Embedded Javascript (EJS) page?

Currently utilizing ejs, node.js & express along with other packages I'm facing an issue where the error.status and error.stack values are not appearing on the rendered page. I suspect that the error variable may be undefined or inaccessible within t ...

javascripthtmlnode.jsexpressejs

Sending an image via email using a highly limited HTML interface

I am working on setting up a webpage connected to my company's internal Intranet page that is specifically designed to allow an iPad to take a picture and then email the picture using our webmail application. The current HTML code I have only allows m ...

htmliosimageemailsafari

Ending the Overlay

I am using an overlay: <div id="overlayer" class="overlayer"> <div id="board" class="board"></div> </div> Here are the CSS properties I have applied to it: #overlayer { position:fixed; display:none; top:0; left:0; width:100%; hei ...

javascriptjquerycssoverlayopacity

When the horizontal scroll is turned off, it also disables the functionality of my mobile-friendly

I came across a helpful post on StackOverflow that suggested using the following code to disable horizontal scrolling: html, body { overflow-x: hidden; } This solution did resolve my issue of horizontal scrolling, but unfortunately it caused problems ...

javascripthtmlcssreactjstailwind-css

Is it possible in PHP to iterate through a query and sort it into a designated column according to a specific value?

I'm working with Laravel and trying to display data from a query in an HTML table. The table contains columns such as id, user, and shift. There are around 100 entries, with the shift column containing values like A, B, C, or D. My goal is to organize ...

phphtmllaravelhtml-table

My attempts to connect to the FreeSwitch server and make calls to the SIP client (XLite) using the SIPml5 client have been met with challenges

I am encountering issues with registering to a FreeSwitch server and making calls to a SIP client (XLite) using the SIPml5 SIP client. Below is the HTML5 code I am using: <!DOCTYPE html> <html> <head> <meta content="charset=utf-8"/ ...

htmlsipfreeswitchsipml

What is the best method for creating a top margin that is dependent on the height of the browser?

Is there a way to make the CSS margin: top; on my HTML main_content element relative to the browser window? I want the main_content to always stay at the bottom of the browser window. How can I achieve this? I attempted the following code, but it didn&apo ...

javascripthtmlcss

The Element fails to go back to its original position due to CSS Float

After changing the screen resolution, it appears that the nav-search-ul element fails to return to its correct position. It seems like the media query is not working properly. This issue only occurs in Chrome, as everything works fine in Firefox and IE. ...

htmlcss

Steps to configuring reverse gradient in a solitary line

I have successfully resolved similar issues with diagonal gradients in the past. However, I am currently facing challenges with linear gradients. Previously, I was able to create a gradient with a cross pattern. background: linear-gradient(to right, tran ...

htmlcssgradientlinear-gradients

I have implemented a button in PHP and now I am looking to invoke a function when that button is clicked

I have a PHP-generated HTML button and I'm having trouble calling the mybtn3() function when it is clicked. The button code looks like this: echo"<td width=14% align=center><input type=button value=Export onclick=mybtn3() /></td>"; ...

javascriptphphtml

Tips on aligning three divs horizontally within a container while maintaining a height of 100%

UPDATE: The alignment has been corrected by adding floats. However, the height still doesn't fill 100%. Check out the new look: Image Link In my footer container, I want to arrange 3 columns (colored green, white, and red for clarity). Currently, the ...

javascriptjqueryhtmlcss

Arrow icon indicating active status in side navigation bar

As part of my journey to enhance my Html and Css skills, I have been recreating templates from various websites. While this exercise has taught me a lot, I have hit a roadblock with one particular template. I am struggling to understand how they manage to ...

htmlcssnavigationeffects