The nested flexbox with scrollable functionality is not being constrained by the maximum height setting

I am currently working on creating a scrollable flexbox within another flexbox that is dependent on a tab selection. As shown in the image above:

https://i.sstatic.net/i0ZYF.png

In the image labeled 1, the box "4" represents my scrollable flexbox, with a tab tool located in the yellow box for selecting elements.

The issue arises when I populate box "4" with numerous entries, causing the page to overflow and only display a small portion of the scroll bar.

Here is my CSS code:

...

My webpage structure looks like this:

...

And here is my JavaScript function:

...

Upon loading the page, everything appears as intended as seen in the image below:

https://i.sstatic.net/16BOx.png

However, upon clicking on Tab1, the layout becomes distorted as shown in the following image which is not the desired outcome:

https://i.sstatic.net/H9tdt.png

How can I correct this behavior with Tab1?

htmlcssflexbox

Answer №1

It seems like you're looking to make box 4 smaller and have it scrollable.

.listtab1groupfour {
    flex: 1 1 auto;
    height: 400px;
    border-style: solid;
    display: flex;
    flex-flow: column;
    min-height: 0;
    overflow: auto; 
}

You can achieve this by setting a fixed height (e.g. 400px) and adding overflow: auto to the CSS for .listtab1groupfour. Also, remove the div right below .listtab1groupfour in your HTML that has inline styling.

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

Display only two random data points for each value

I have this code snippet that displays data from a database and filters "Provider" categories with "searchByProvider". Is it possible to only show 2 random pieces of data when someone selects "Provider"? There is a lot of data under Provider, but I want to ...

phphtmlcssmysqlajax

When using CKEditor, pressing the Enter key results in the insertion of <br /> tags

Whenever I use ckeditor, I find that pressing enter results in two <br /> tags being inserted. While I want to keep the line break tags, having them appear twice is not ideal. In my config.js file, I have set the configuration for the enter key as f ...

javascripthtmlcssckeditor

Unable to broadcast messages to specific rooms using Socket.io

socket.on('join room', function (data) { var room = data.room; var msg = "<span style='color:darkgreen;'>" + data.user + " has joined chat.</span>"; socket.join(room, function () { console.log(socket.id ...

javascriptjqueryhtmlexpresssocket.io

Modifying SAS ODS contentitem in PROC SQL SELECT query

When using SAS to generate ODS output in HTML format, you have the option to include a table of contents with the "CONTENTS" and "FRAME" settings: ODS HTML PATH="C:\Path\" (url=none) BODY="body.html" CONTENTS="contents.html" ...

htmlsqlsas

Is my code incorrect, or is JQUERY failing to load correctly?

I'm currently experimenting with jQuery methods for ajax in order to create a dropdown menu. Below is the jQuery code I am using: JAVASCRIPT: <SCRIPT> $("select[name='carid']").on("change", function() { $.post( ...

javascriptphpjqueryhtmlajax

Issue with CSS percentage-based positioning when applied to an element inside a container is not producing

Apologies for the vague title, but describing this issue is a bit tricky. Essentially, I have a wrapper div that is positioned absolutely with right = 100%, causing it to move completely off the screen to the left. Inside the wrapper, there is a div named ...

htmlcss

Using CSS to create a triangular background within a <div> element

I am looking to create a CSS triangle shape for a background, but I am unsure of how to achieve this or if it is even possible. Ultimately, I want the menu to resemble the image linked below: While I have come across methods to create the desired shape, ...

htmlcss

Is there a way to postpone the mouseover event for vertical tabs?

While this may seem like a simple question to some, my programming skills are not quite up to par. I am seeking help from someone who can assist me. My goal is to delay the mouseover event on vertical tabs so that users can jump directly from tab 1 to ta ...

javascriptjqueryhtmlcsstabs

Scrolling to a specific position on a page when a Vue 3 component appears is a must-do for

When I click a button, my basic form component appears without using the router. I would like the scroll position of the form to automatically move down slightly (for example, on the y-axis at 40) once it is displayed. However, I am unsure of how to achi ...

javascripthtmlvue.jsvuejs3

Choose the most recent message in the Selenium Discord channel

Struggling to select the last message in a Discord channel with Selenium. The XPath keeps changing for the last message, and I just want to copy it. The ID of the last message is constantly changing. If anyone can help me out, that would be great. This c ...

pythonhtmlselenium

Transition effects on table images using CSS

How can I incorporate CSS transitions into my holiday list? When hovering over an image, I want it to display a larger size and then return to normal when the mouse is moved off. I understand how to do this with JavaScript, but I prefer to achieve this e ...

htmlcsscss-transitions

Expand or collapse in a sequential manner

Is there a way to ensure that only one table row expands at a time, causing the others to collapse? Any suggestions on achieving this? Here's the HTML code snippet: <table class="table"> <tbody> <tr class="parent" id="2479"> ...

javascriptjqueryhtmlcss

retrieving embedded content from an iframe on Internet Explorer version 7

Need help with iframe content retrieval $('.theiframe').load(function(){ var content = $(this.contentDocument).find('pre').html(); } I'm facing an issue where the iframe content is retrieved properly in FF, Chrome, and IE 8,9 ...

javascriptjqueryhtmlinternet-exploreriframe

Toggle a DIV's class using jQuery upon clicking a link, then hide the link and reveal the hidden information inside the DIV. This functionality can be applied to multiple

My main objective is to create a product page that showcases multiple product images within the productLayout DIV. When the link within this DIV is clicked, it should add the class pL100, expanding the width of the DIV to reveal hidden content within the h ...

htmladdclassremoveclassjquery

Looking to have images and text aligned horizontally within a grid layout?

<div> <button style=" padding: 10px 16px 10px 16px; vertical-align: middle; margin: auto; width: 32%;"> <img style=" width: 22px; height: 22px; vertical-align: middle; " src="https://upload.wikimedia.org/wiki ...

htmlcss

Retrieving Data from an Unnamed HTML Table using Selenium

I'm currently exploring ways to extract the output generated by this website: mailtester.com upon inputting a complete email. Let's take the email address [email protected] for demonstration. Once this address is entered and submission is ma ...

htmlseleniumxpath

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

When attempting to click a button, I encountered an error stating that the element is not clickable at point (1333, 75) as another element would receive the click. This issue arose while using Google Chrome version 65. <li class="slds-dropdown-trigge ...

javahtmlselenium

Can we incorporate Inline-CSS code (such as style="color:ffaa00;font-family:times;") in the Google Glass Mirror API?

When creating HTML in the Google Mirror API, is it permissible to incorporate CSS styles like this: <h1 style="color:#ffaa00;font-family:times;"> Is it acceptable to utilize custom colors and webfonts? It seems to work in the playground but I am un ...

csscolorswebfontsgoogle-mirror-api

Tips on adjusting the dimensions of a switch in kendo UI angular with CSS

Currently, I am utilizing angular in combination with Kendo ui. Is there a way to modify the dimensions of the switch button in Kendo UI Angular using CSS? ...

cssangularwebkendo-ui

HTML: Base64 image not displaying properly due to incorrect height specification

I have a straightforward base64 image that I am having trouble with. The issue is that only the upper half of the image is displaying. If I try to adjust the height using the "style" attribute in the img tag: style="height: 300px;" it shows correctly. Ho ...

javascripthtmlcssimagesvg