Scrolling issue with overflowing content in Bootstrap 4 tabs

Currently tackling a Bootstrap 4 Holy Grail layout.

My goal is to make each column scroll overflowing content independently without specifying a height. The left column works fine, but the right column contains a Bootstrap NAV/TAB widget. Specifically, the third tab labeled MENU 2, has overflowing content that refuses to scroll no matter what I attempt.

What could I be overlooking? Any guidance would be greatly appreciated!

Below is the relevant CSS:

.flex_item2 {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
overflow-y: auto;
}

Check out the demo here:

Thank you for your help!

https://i.sstatic.net/0CsEK.jpg

Answer №1

Discovered the problem! It seems that Firefox (version 35.01 and up) and IE11 struggle with scrolling when nested flex boxes are involved. Here are some solutions to address this issue.

firefox overflow-y not working with nested flexbox

https://github.com/philipwalton/flexbugs/issues/164

I'll be updating the Bootstrap 4 Holy Grail layout code to include the workaround. Enjoy!

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

Place a stationary element under another stationary element

I have a dilemma with two fixed elements on my website. One of them can toggle between display: block and display: none, while the other is always visible. I want both elements to stay at the top of the webpage without overlapping each other. I've co ...

Enhance User Experience in IE11 by Providing Font Size Customization with Angular (Using CSS Variables)

I am in the process of developing an Angular application. One of the requirements is to allow the user to choose between small, medium, or large font sizes (with medium being the default) and adjust the font size across the entire webpage accordingly. Wh ...

Animating the width of a progress bar to enhance visual appeal

I am looking to animate five Bootstrap progress bars to a specific width. Instead of defining the specific width in @keyframes five times, I am wondering if there is a way to achieve this with just one animation. Additionally, I want the animation to only ...

Incorporating a technique for aligning text towards the right as the number of characters or digits expands

I'm designing a game user interface with a money indicator. Let's imagine the player has 0 dollars in their wallet, it should appear like this: https://i.stack.imgur.com/35eoh.png Please note that it is located in the upper right corner. The p ...

How can I retrieve the CSS style value within the C# code behind?

When working with ASP.NET code behind, I often find myself adding a css style to an element using the following command: elementID.Style.Add("padding", "20px"); However, once this css property is added to elementID, the question arises - how can I access ...

How to Customize Bootstrap 4 Form Styles

Looking to customize the appearance of a checkbox in a web framework utilizing bootstrap 4, I attempted to override the custom-control-label class by setting the position property to auto instead of its default value of relative. Although I achieved the ...

Showing XML content with JavaScript

Trying to parse a simple XML list using JavaScript, but having trouble formatting it the way I need. <TOURS> <MONTH> <TOUR> <NUMBER>1</NUMBER> <VENUE>City Name - Venue Name</VENUE> < ...

Is it feasible to dynamically change SCSS variables using React props? Let's explore this possibility

I've been struggling for the past 2 days to find a solution to my problem. Unfortunately, I haven't found any solutions yet. I'm facing issues with color states in my project. When I select a color from the color picker, I want to update tha ...

What is the best way to insert shapes in between pictures?

As a beginner in bootstrap, I am trying to create photo galleries for my sample website. I would like to incorporate the diamond shapes seen in the photo into the image gallery. I came across this source code: <div class="row"> < ...

html tables cannot be aligned row by row

I am attempting to display messages row by row and then show a text box for input to send a message. The issue I am facing is that I can display the messages row by row, but the text box appears next to the displayed messages horizontally rather than at th ...

Converting HTML to Plain Text in Vue.js

Is there a way to convert HTML to plain text using vuejs? <ol> <li>The quick brown fox jumps over the lazy dog</li> <li>The quick brown fox jumps over the lazy dog</li> <li>The quick brown fox jumps over the ...

Using CSS pseudo elements (`:before` and `:after`) to display SVG icons that can be easily re-used and self-hosted

Exploring Self-Hosting Static Assets After coming across an article about the risks of using CDN's or external infrastructure for hosting static assets, I started considering self-hosting fonts and icons myself. I know you can self-host fonts by dow ...

Experiencing challenges during the creation of a NUXT build

Trying to build a Nuxt SSR app, but encountering an error related to the css-loader during the build command execution. The issue seems to be with Invalid options object. ERROR in ./node_modules/vue2-google-maps/dist/components/streetViewPanorama.vue (./no ...

Prevent lengthy headers from disrupting the flow of the list items

I've encountered an issue while working on a website that features a list of items. When the title, such as "roller blinds," spans across two lines, it disrupts the layout below. How can I prevent this from happening without compromising on having lon ...

Out of the blue, the CSS functionality in my React app completely ceased to

I've been developing this website using React and Material UI, and I chose to implement standard CSS for styling. However, after closing my code editor and reopening it, some parts of the CSS do not seem to be loading properly. I'm completely puz ...

What is the HTML code to display a table and a video/image side by side?

I'm facing a challenge while trying to create a website. I want to place a table in the center of the page, with videos on either side of it. However, whenever I attempt this, the table ends up below the videos instead of being aligned with them. I&ap ...

What is the best way to incorporate a function that works seamlessly with elements?

For the elements with corresponding 'li' that has a selected class, I need to set the selected property only for those specific 'option' elements. The value is determined by the data-input-value attribute in the 'li' and the v ...

Expand the Layer if it overflows

Currently, I have a div element containing various content with Java dropdown links causing the length of the content to vary greatly vertically. By applying "overflow-y: scroll," the content remains in the layer and a scrollbar appears, functioning as in ...

Prevent an element from being displaced when the window is resized

Hello, I am currently in the process of designing the footer for my project. However, I have encountered an issue where every element I code seems to shift whenever the window is resized by either me or the user. I have attempted the following solutions: ...

Issue encountered with list that is set to float to the left

I am facing a situation where I have to display a list of items horizontally, with the exception of the first item. All the items after the first one have a margin-left property applied, but when there are too many items they end up overflowing to a new ro ...