user10341225
Reputation:
Stacking two parent flexbox containers on top of one another
I have two .container elements both are which are at a height of 50%.
These contain the .element divs which are child elements to the .container parent div.
The issue I am facing is when I use media queries with flex-direction: column to get the containers to stack on top of each other concurrently, they are all intertwined.
How am I able to amend my CSS code in order to successfully have the two .container divs to stack?
I have used the property overflow: auto within .pageContent so scrolling shouldn't be an issue.
Please find attached two image links: one of both .container divs before media queries is 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%;
}
.pageContent.broaden > .container > .element {
display: flex;
flex: 1;
flex-direction: column;
border: 1px solid rgba(255,255,255,0.1);
padding: 12px;
}
.pageContent.broaden > .container > .element.centered {
align-items: center;
justify-content: center;
text-align: center;
}
.pageContent.broaden {
height: calc(100vh - 64px);
background: #0a1325;
}
.pageContent.regular {
height: calc(100vh - 106px);
background: #0a1325;
}
.pageContent.portalSpec {
height: calc(100vh - 64px);
background: #999;
}
@media screen and (max-width: 800px), screen and (max-height: 600px) {
.pageContent.broaden > .container {
flex-direction: column;
}
}
.pageContent.broaden > .container > .element > button {
width: 90px;
height: 90px;
border: 2px solid #fff;
border-radius: 100%;
}
.pageContent.broaden > .container > .element > span {
margin: 12px 0 0 0;
line-height: 2.0;
font-size: 9pt;
color: #fff;
}
.pageContent.broaden > .container > .element > span > a {
color: #0066cc;
text-decoration: underline;
}
.pageContent.broaden > .container > .element > .header {
display: flex;
align-items: center;
height: 48px;
padding: 0 10px;
background: rgba(255,255,255,0.04);
color: #fff;
}
.pageContent.broaden > .container > .element > .header > h1 {
font-size: 14pt;
}
.pageContent.broaden > .container > .element > .main {
display: flex;
flex-direction: column;
flex: 1;
padding: 8px;
overflow: auto;
color: #fff;
}
.pageContent.broaden > .container > .element > .main > ul > li {
font-size: 9pt;
line-height: 1.5;
margin: 8px 0;
}
.pageContent.broaden > .container > .element > .main > ul > li > a {
color: #0066cc;
text-decoration: underline;
}
.pageContent.broaden > .container > .element > .main > p {
font-size: 9pt;
line-height: 1.5;
margin: 8px 0;
}<div class="pageContent broaden">
<div class="container">
<div class="element centered">
<button style="background: rgb(3, 182, 252);">
<svg width="40" height="40" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M493.09 351.3L384.7 304.8a31.36 31.36 0 0 0-36.5 8.9l-44.1 53.9A350 350 0 0 1 144.5 208l53.9-44.1a31.35 31.35 0 0 0 8.9-36.49l-46.5-108.5A31.33 31.33 0 0 0 125 .81L24.2 24.11A31.05 31.05 0 0 0 0 54.51C0 307.8 205.3 512 457.49 512A31.23 31.23 0 0 0 488 487.7L511.19 387a31.21 31.21 0 0 0-18.1-35.7zM456.89 480C222.4 479.7 32.3 289.7 32.1 55.21l99.6-23 46 107.39-72.8 59.5C153.3 302.3 209.4 358.6 313 407.2l59.5-72.8 107.39 46z"></path>
</g>
</g>
</svg>
</button>
<span>Call Summit Support on <a href="tel:0400000000">0400 000 000</a> at any time.</span>
<span><b>Primary Student Contact:</b> Mr Tom Carpenter</span>
</div>
<div class="element centered">
<button style="background: rgb(139, 195, 74);">
<svg width="40" height="40" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path>
</g>
</g>
</svg>
</button>
<span>Email Summit Support on <a href="mailto:[email protected]">[email protected]</a> or complete the webform contained within the Help button located at the bottom of the left navigation pane for assistance.</span>
</div>
<div class="element centered">
<button style="background: rgb(255, 87, 34);">
<svg width="40" height="40" viewBox="0 0 448 512">
<g style="fill: #fff;">
<g>
<path d="M224 32c106 0 192 28.75 192 64v32c0 35.25-86 64-192 64S32 163.25 32 128V96c0-35.25 86-64 192-64m192 149.5V224c0 35.25-86 64-192 64S32 259.25 32 224v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V320c0 35.25-86 64-192 64S32 355.25 32 320v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V416c0 35.25-86 64-192 64S32 451.25 32 416v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5M224 0C145.858 0 0 18.801 0 96v320c0 77.338 146.096 96 224 96 78.142 0 224-18.801 224-96V96c0-77.338-146.096-96-224-96z"></path>
</g>
</g>
</svg>
</button>
<span><a href="#">Click here</a> to access the external Summit knowledge base to access guides in relation to assistance in using the Summit software package.</span>
</div>
</div>
<div class="container">
<div class="element">
<div class="header"><h1>Current release:</h1></div>
<div class="main">
<ul>
<li><b>Summit Suite 2021.1:</b> Welcome to the 2021.1 release of the Summit Suite. This release includes detailed information and processes on all the new functionality, changes and bug fixes. Please <a href="#" target="_blank">click here</a> to view the release notes.</li>
</ul>
</div>
</div>
<div class="element">
<div class="header"><h1>Past releases:</h1></div>
<div class="main">
<p style="text-align: center;"><i>There are no past releases available to view.</i></p>
</div>
</div>
</div>Thank you for your assistance.
Upvotes: 0
Views: 402
Answers (1)
J4R
Reputation: 1104
you have to add overflow: auto; to your .container classes.
In your case to .pageContent.broaden > .container.
If you do this, you have 2 divs (each 50% height) stacking 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%;
/* THIS IS NEW */
overflow: auto;
}
.pageContent.broaden > .container > .element {
display: flex;
flex: 1;
flex-direction: column;
border: 1px solid rgba(255,255,255,0.1);
padding: 12px;
}
.pageContent.broaden > .container > .element.centered {
align-items: center;
justify-content: center;
text-align: center;
}
.pageContent.broaden {
height: calc(100vh - 64px);
background: #0a1325;
}
.pageContent.regular {
height: calc(100vh - 106px);
background: #0a1325;
}
.pageContent.portalSpec {
height: calc(100vh - 64px);
background: #999;
}
@media screen and (max-width: 800px), screen and (max-height: 600px) {
.pageContent.broaden > .container {
flex-direction: column;
}
}
.pageContent.broaden > .container > .element > button {
width: 90px;
height: 90px;
border: 2px solid #fff;
border-radius: 100%;
}
.pageContent.broaden > .container > .element > span {
margin: 12px 0 0 0;
line-height: 2.0;
font-size: 9pt;
color: #fff;
}
.pageContent.broaden > .container > .element > span > a {
color: #0066cc;
text-decoration: underline;
}
.pageContent.broaden > .container > .element > .header {
display: flex;
align-items: center;
height: 48px;
padding: 0 10px;
background: rgba(255,255,255,0.04);
color: #fff;
}
.pageContent.broaden > .container > .element > .header > h1 {
font-size: 14pt;
}
.pageContent.broaden > .container > .element > .main {
display: flex;
flex-direction: column;
flex: 1;
padding: 8px;
overflow: auto;
color: #fff;
}
.pageContent.broaden > .container > .element > .main > ul > li {
font-size: 9pt;
line-height: 1.5;
margin: 8px 0;
}
.pageContent.broaden > .container > .element > .main > ul > li > a {
color: #0066cc;
text-decoration: underline;
}
.pageContent.broaden > .container > .element > .main > p {
font-size: 9pt;
line-height: 1.5;
margin: 8px 0;
}<div class="pageContent broaden">
<div class="container">
<div class="element centered">
<button style="background: rgb(3, 182, 252);">
<svg width="40" height="40" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M493.09 351.3L384.7 304.8a31.36 31.36 0 0 0-36.5 8.9l-44.1 53.9A350 350 0 0 1 144.5 208l53.9-44.1a31.35 31.35 0 0 0 8.9-36.49l-46.5-108.5A31.33 31.33 0 0 0 125 .81L24.2 24.11A31.05 31.05 0 0 0 0 54.51C0 307.8 205.3 512 457.49 512A31.23 31.23 0 0 0 488 487.7L511.19 387a31.21 31.21 0 0 0-18.1-35.7zM456.89 480C222.4 479.7 32.3 289.7 32.1 55.21l99.6-23 46 107.39-72.8 59.5C153.3 302.3 209.4 358.6 313 407.2l59.5-72.8 107.39 46z"></path>
</g>
</g>
</svg>
</button>
<span>Call Summit Support on <a href="tel:0400000000">0400 000 000</a> at any time.</span>
<span><b>Primary Student Contact:</b> Mr Tom Carpenter</span>
</div>
<div class="element centered">
<button style="background: rgb(139, 195, 74);">
<svg width="40" height="40" viewBox="0 0 512 512">
<g style="fill: #fff;">
<g>
<path d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path>
</g>
</g>
</svg>
</button>
<span>Email Summit Support on <a href="mailto:[email protected]">[email protected]</a> or complete the webform contained within the Help button located at the bottom of the left navigation pane for assistance.</span>
</div>
<div class="element centered">
<button style="background: rgb(255, 87, 34);">
<svg width="40" height="40" viewBox="0 0 448 512">
<g style="fill: #fff;">
<g>
<path d="M224 32c106 0 192 28.75 192 64v32c0 35.25-86 64-192 64S32 163.25 32 128V96c0-35.25 86-64 192-64m192 149.5V224c0 35.25-86 64-192 64S32 259.25 32 224v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V320c0 35.25-86 64-192 64S32 355.25 32 320v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5m0 96V416c0 35.25-86 64-192 64S32 451.25 32 416v-42.5c41.25 29 116.75 42.5 192 42.5s150.749-13.5 192-42.5M224 0C145.858 0 0 18.801 0 96v320c0 77.338 146.096 96 224 96 78.142 0 224-18.801 224-96V96c0-77.338-146.096-96-224-96z"></path>
</g>
</g>
</svg>
</button>
<span><a href="#">Click here</a> to access the external Summit knowledge base to access guides in relation to assistance in using the Summit software package.</span>
</div>
</div>
<div class="container">
<div class="element">
<div class="header"><h1>Current release:</h1></div>
<div class="main">
<ul>
<li><b>Summit Suite 2021.1:</b> Welcome to the 2021.1 release of the Summit Suite. This release includes detailed information and processes on all the new functionality, changes and bug fixes. Please <a href="#" target="_blank">click here</a> to view the release notes.</li>
</ul>
</div>
</div>
<div class="element">
<div class="header"><h1>Past releases:</h1></div>
<div class="main">
<p style="text-align: center;"><i>There are no past releases available to view.</i></p>
</div>
</div>
</div>Upvotes: 0
Related Questions
- How can I stack two items on the same row within the same box
- How to have 2 overlapping elements fill their parent
- Different flex containers side by side
- Using Flex - change two child div's to stack on each other with 100% width
- Placing a flex item under another flex item in a flex box container
- How to set two flexbox containers next to each other
- How to stack items above each other with flex box?
- How to make flex items that are also flex containers stack horizontally?
- How can I layer two <div>s in a flexbox container?
- Is there a way to stack divs on top of each other using flexbox syntax?