Placing two parent flex containers on top of each other

I'm in a situation where I have two .container elements, both set at a height of 50%.

Within these containers are the child divs .element, which belong to their respective parent divs .container.

The problem arises when applying media queries with flex-direction: column to make the containers stack on top of each other simultaneously, resulting in them overlapping.

How can I adjust my CSS code to ensure that the two .container divs stack properly?

Included below are links to two images for reference: one showing both .container divs before media queries were applied and one after.

Code

.pageContent {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 8px;
}

.pageContent.broaden > .container {
    display: flex;
    flex-direction: row;
    height: 50%;
}

// More CSS properties here...

@media screen and (max-width: 800px), screen and (max-height: 600px) {
    // Media query specific styles
} 

// Additional CSS rules for styling elements
// HTML Markup containing various elements and styles

Thank you kindly for your support.

htmlcss

Answer №1

You need to apply the CSS property overflow: auto; to the .container classes.
Specifically, in your case to 

.pageContent.broaden > .container
.

By doing this, you will have two divs (each with 50% height) stacked on top of each other.

.pageContent {
    display: flex;
    flex-direction: column;
    overflow: auto;
    padding: 8px;
}

.pageContent.broaden > .container {
    display: flex;
    flex-direction: row;
    height: 50%;
    
    /* NEW ADDITION */
    overflow: auto;
}

/* Additional CSS rules here */


<div class="pageContent broaden">
                    <div class="container">
                        <div class="element centered">
                            <button style="background: rgb(3, 182, 252);">
                                <svg>
                                    <g>
                                        <path d=""></path>
                                    </g>
                                </svg>
                            </button>
                            <span>Call Summit Support on <a href="tel:0400000000">0400 000 000</a> at any time.</span>

                            <!-- More content here -->

                        </div>

                        <!-- More sections like above -->

                    </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

How to make a line stand out in an HTML table using <td> tag: **Bold a

I have written the code below to create a table, and I only want the text XYZ to be bold and all other text to remain unbold within the < td > tag. However, when I implemented this code, the entire < td > content became bold. I would prefer not ...

htmlcss

creating folding effect using javascript and css with divs

I've been searching high and low on the internet for a solution like this, but so far I haven't had any luck. It seems like there might be a JavaScript script out there that dynamically changes the css -webkit-transform: rotateY(deg) property. ...

javascriptjquerycsscarousel

Expanding on the specific properties of a parent component to its child, using SASS's extend feature

Can selected or specific properties be shared/extended from the parent to the child without the need to create a variable? .main-container { padding: 20px; margin: 20px; ul { padding:$parentPadding(); margin: 0; } ...

htmlcsssass

Find the item in the pop-up window

When removing a user from my list, a JavaScript popup pops up prompting to confirm the action with two buttons "OK" / "Annuler" : https://i.sstatic.net/BEdH2.png Is there a way to use Selenium to find and interact with these buttons? ...

javascripthtmlselenium-webdriver

The dropdown menu with Bootstrap's <li> sub menu is not expanding as expected

<li class="dropdown"> <a href="#" class="dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">Utilitas<span class="c ...

cssbootstrap-4drop-down-menuhtml-listssubmenu

What is the process for updating a placeholder text after the user makes a guess or enters

My latest project involves creating a fun guessing game where players have to identify the driver based on the teams they have driven for. The game displays the number of guesses allowed and keeps track of how many attempts the player has made so far. For ...

javascripthtmlplaceholder

How can you match the width of a series of elements to the width of an image directly preceding the div?

Looking to ensure that a series of captions have the same width as the images preceding them. This is the HTML code: <div class="theparent"> <img src="pic.jpg"/> <div class="caption"> hello </div> <div> <div ...

javascriptjqueryhtmlcss

Automatically updating div content using a static HTML page

Is there a way to refresh the content of an HTML div tag every 5 minutes without having to reload the entire page? <div id="pie"> <script src="index.js">// this script should be reloaded every 5 minutes </script& ...

javascripthtmlnode.js

Issue with event listener arising once elements have been loaded into the dom

I have a project where I want to click on a category card to obtain its id and then redirect to the movies screen. I understand that using row.eventlistener() in index.js executes before the elements are rendered, causing the id not to be captured. How ca ...

javascripthtmlfetch-api

Should one consider utilizing Ionic for creating a mobile web variant of a website?

Working for a Startup, we made the decision to create an adaptive website instead of a responsive one. This means that we serve different views for different devices in order to provide the best user experience for both mobile and desktop users. We are c ...

angularjshtmlmobilewebionic-framework

Guide to switch background image using querySelector

I am currently trying to figure out how to set the background image of a div block by using querySelector. I have attempted various methods in my test code below, but unfortunately none seem to be working. Can someone please provide assistance? <!DOC ...

javascriptcsshtmljquery-selectorsbackground-image

Utilize dynamic CSS application within an Angular application

In my Angular application, I dynamically load URLs inside an iframe and want to apply custom.css to the loaded URL once it's inside the iframe. I attempted using ng-init with angular-css-injector function in the iframe, but the CSS is not being applie ...

cssangularjsurldynamic

Best placement for <img> tag in HTML for creating a background image using CSS (excluding CSS3)

I am currently working on a programming project called Broadway through Codeacademy. I have been given the task of adding a background image to the webpage. It seems like an easy task to accomplish. The simplest way to achieve this effect is by using the f ...

htmlcsstwitter-bootstrap

What is causing the content to overflow outside of the navbar on smaller screens or mobile devices?

/* *{ font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; overflow-x: hidden; } */ .main { min-height: calc(100vh - 10rem); display: grid; place-items: center; } p { font-size: 4rem; line-height: 1.6; } nav ...

htmljquerycssbootstrap-4

Updating Django database records with ajax

I'm currently working on a feature that involves filtering table data and updating the table using ajax. Here's what I have so far: Filter Form: <form id="search" method="POST" action="{% url 'article-filter' %}"> <input ...

javascripthtmldjangoajaxforms

Implement a captivating hover effect on every single element within a particular class

I created a basic website with the following design: However, there is an issue with the hover effect. It only works on the specific area where the mouse pointer is located (here ipsum). My intention was for the hover effect to work on all elements. To fi ...

htmlcss

A guide on retrieving real-time data from PHP using Ajax

Being new to Ajax, I am struggling to grasp how to retrieve changing variable values from php. Below is the code snippet that I have been working on: <?php $pfstatetext = get_mypfstate(); $cpuusage= cpu_usage(); ?> <div id="show"> <c ...

javascriptphphtmlajax

A guide on accessing checkbox values using jQuery

What is the best way to utilize jQuery in order to retrieve the values of checked checkboxes and instantly input them into a textarea? For example: <html> <head> </head> <body> <div id="c_b"> <input type= ...

jqueryhtmlcheckbox

Challenges with conflicting CSS styling issues

I am facing a CSS issue on my website. I am trying to add captions for images on my site. I have experimented with the jquery-capty plugin () and some custom CSS styles for framed images (). While both solutions work in my regular layout, they do not funct ...

jqueryhtmlcss

The background color should only cover a specific percentage of the element

Here is the current structure I have: <li class="myclass" ng-class="myAngularClass"> <div> div1 <div> div2 </div> </div> </li> The li element has dynamic dimensions and width. The class "myAngularClass" i ...

cssangularjs