Spilling over: Harnessing the power of flexbox

After searching extensively for a solution on how to control the overflow of a parent container with flexbox, I couldn't find one. So here's another question regarding the same issue.

What I want: The problematic part is commented in the HTML code. https://i.sstatic.net/x3NTh.png

What I get:

https://i.sstatic.net/4glkp.png

Below is the code snippet for reference:

[CSS CODE HERE]
[HTML CODE HERE]

This project will utilize flexbox entirely: Meaning I'll be using: 

display: flex;
flex: 1;
flex-direction: column;

This has been an ongoing problem for me over the past couple of months. Any swift resolution would be greatly appreciated. Thank you!

htmlcssweb

Answer №1

For proper overflow handling, you should position the overflowing element absolutely. After encountering the same issue myself, I spent a considerable amount of time searching for a solution. It seems to be a common occurrence when using flex layout.

Below is the key change required:

<div style="flex: 1; border-bottom: .01rem solid lightgray; position: relative;">
    <section style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow-y: scroll;">
       <div style="height: 40rem">content</div>
    </section>
</div>

Check out the code snippet below where you can see this implementation in action.

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

Children divs unexpectedly showing up outside of their parent divs

I have reviewed similar questions on this matter, but none of them seem to provide a solution for the issue I am facing. Currently, my goal is to display a stylized list, but I am encountering more difficulties than expected. You can find a fiddle linked ...

csshtml

problem with creating a django template script

Hello, I am currently working on a code that is responsible for executing various functions within the template. I have utilized scripts to verify these functions using if-else statements and for loops. However, I am encountering some errors during this pr ...

javascripthtmljquerycssdjango

Switch up the color and eliminate the gradient on the remove button for the Qualtrics 2014 3D theme

Hello everyone, I have successfully updated the styling of the next/previous buttons in most survey themes using CSS code snippets found here. However, I am facing an issue with the newest themes ("Qualtrics 3D - Gold" & "Qualtrics 3D - 2014") as I cannot ...

cssqualtrics

What are the steps to remove scrollbars in Webmethods 8?

After transitioning from Webmethods 7 to Webmethods 8, I noticed that my portlets now have unwanted horizontal scroll bars at the bottom. Is there a way to remove them? Would CSS be able to solve this issue? Any advice would be greatly appreciated! ...

cssscrollbarportletscrollbarswebmethods

What is the best way to ensure that `col-sm-4` takes up the full space previously occupied by `col-sm-5` when it is hidden

In tablet mode, I am concealing my col-sm-5 using the class hidden-sm. <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-5"> </div> <div class="col-sm-3"> </div> </div& ...

csstwitter-bootstraptwitter-bootstrap-3

When using Html5 mode with Angularjs and Express, the URL rewrite will always return the index page for

I have been searching for answers to a problem I am facing using similar questions. To utilize html5Mode with angularjs, it is necessary to inform the server on how to handle a direct visit to a page. The issue I am encountering is that when clicking on a ...

htmlangularjsexpress

Unusual display of fonts on Chrome

Recently, I encountered a strange issue with font rendering on Chrome/Opera compared to Firefox. The problem can be seen in the preview below - pay attention to the pink text. It appears blurry initially but sharpens once text input is focused. This same i ...

cssgoogle-chromefontsfont-faceopera

Customize the logo height in your shinydashboard header title

I have written the following code to create a dashboard: library(shinydashboard) library(shiny) library(fresh) mytheme <- create_theme( adminlte_color( light_blue = "#004e70" ), adminlte_sidebar( width = "400px", da ...

cssrshinyshinydashboard

Trouble accessing Angular page after resource call was made

Seeking assistance with creating a Dispatchsystem for the local taxi company using Angular. While not an expert in Angular and its functionalities, I encountered an issue after setting up angular-route to inject html pages into the main html document and e ...

javascripthtmlangularjs

Prevent manual scrolling with CSS

I've incorporated CSS smooth scrolling into my project, which is activated by clicking a specific div element. My current goal is to prevent manual scrolling on the page so that users can only navigate by clicking the designated div and not by conven ...

htmlcssuser-interfacescrollcss-transitions

Insert a new div directly underneath the specific div that was clicked within a series of divs

https://i.sstatic.net/gSj3D.png I am facing a situation where I have a list and need to render a box below a specific row when it is clicked. The challenge is to ensure that the other rows are shifted down accordingly. Is there any plugin that can help wi ...

htmlcssreactjsfrontend

The navigation menu links that are meant to stay fixed at the top of the page are not functioning

On my website, I implemented Foundation's Magellan sticky menu at the bottom. Strangely, when I view the site in Firefox, the menu functions properly. However, when I try to open it in Google Chrome, the links don't work (and the cursor pointer d ...

jqueryhtmlcssgoogle-chromezurb-foundation

Error encountered during post-installation process for package `[email protected]`. The script `node scripts/build.js` failed to execute, resulting in an exit status of 1

https://i.sstatic.net/LC5wq.pngWhenever I run the gulp serve command for my AngularJS Fuse project, I encounter this error. C:\wamp\www\bank_admin_post_login\Fuse-1.4.1-demo>gulp serve C:\wamp\www\bank_admin_post_log ...

htmlangularjsnode.js

image background not appearing in HTML, CSS, and JavaScript game

When working on a simple HTML, CSS, and JavaScript game, I decided to make a change in the CSS code. Instead of setting the background color to green as before, I opted to use an image with the following line: background-image: url(flappybird.png); I also ...

javascripthtmlcssbackground-image

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

cssextjssassextjs6extjs6-classic

Extracting information from an HTML form and generating a PDF document using TCPDF

I've recently delved into the world of TCPDF and hit a snag... My task was to create a form on our intranet where employees could input data (text fields and radio button), submit it, and have TCPDF generate a PDF with that information. I have an ide ...

phphtmlpdftcpdf

``A problem with the background image of the left panel in Framework 7

After setting a background image for the side panel and blurring it using CSS, I encountered an issue where the text and icons within the side panel also became blurred. Despite attempting to isolate the background image in a separate class, the problem ...

csshtml-framework-7

Adding text to a Video Js fullscreen window on an iPad

Looking to enhance user experience on iPad while using a video js player, I want to make an image pop up upon completion of the video. Currently, I have it set up to work without full screen mode, but iPad users prefer watching videos in full screen. Is th ...

jquerycsshtmlhtml5-video

What's causing ng-show to malfunction in IE11 on AngularJS?

I am experiencing a strange issue with my code - ng-show works perfectly fine on Firefox, but not on IE 11. <div ng-show="isExist" class="panel panel-default"> Here is the relevant code snippet from the controller: $scope.isExist = false; if(user ...

javascriptangularjshtmlcssangularjs-directive

Leveraging AJAX for implementing PHP scripts

While I may not be an MVC model expert, I'm trying to keep my page design separate from my logic in order to simplify things. I have already created a basic template and now I want hyperlinks to open PHP files within the same page. For example: Next ...

phpjavascriptjqueryhtmlajax