将两个父容器 flexbox 堆叠在一起

Question

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.

• Image 1 - page before media queries is applied.
• Image 2 - page after media queries is applied.

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:support@summitlms.com">support@summitlms.com</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.

Answer 1

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:support@summitlms.com">support@summitlms.com</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>