html - 'Elements from collapsing'变小怎么防止 'Vertical Viewport'？

Question

我正在构建一个网站布局作为练习，使用 Flexbox。但是，当我对网站进行响应测试时，元素会相互折叠。

使用 Flexbox，我尝试构建一个响应式网站，当您调整浏览器的尺寸时，它会自动调整比例。地平线测试是通过的，但是当我打开检查工具时，“垂直视口(viewport)”变小了，蓝色的 'Section' 和紫红色的 'Footer' 都相互折叠，因为网站的垂直方面没有按预期工作。

我尝试改变并尝试使用不同大小的单位，例如{%, em, vh, vw}，让元素根据彼此，但当我

我上传了代码:{HTML & CSS}到Codepen

:root{
    text-align: center;
}

body{
 background-color: gray;
 height: 100vh;
}

.container{
    margin-left: 1em;
    margin-right: 1em;
    background-color: gray;
    display: flex;
    flex-direction: column;
}

.headerAndNav{
}

.header{
    background-color: navajowhite;
    border: 0.5em solid gray;
}

.nav{
    background-color: powderblue;
    border: 0.5em solid gray;
}

.sectionAndAside{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.header{
    height: 8vh;
}

.nav{
    height: 8vh;
}

.middle{
    display: flex;
    flex-direction: row;
    /* background-color: red; */
    border: 0.5em solid gray;
    height: 40vh;
}

.aside{
    background-color: powderblue;
    width: 50%;
    margin: 0.5em 0 0.5em 0.5em;
}

.section{
    color:red;
    display: flex;
    flex-direction: column;
    background-color: blue;
    width: 50%;
    margin: 0.5em 0.5em 0.5em 0;
    padding-top: 3em;
}

.article{
    background-color: yellow;
    height: 100vh;
    margin: 10px;
}

h1{
    background-color: bisque;
}

h2{
    background-color:gold;
}

h3{
    background-color: khaki;
}

.hClass{
    background-color: gray;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 10vh;
    margin: 1em;
}

.p{
    background-color: lightcoral;
    height: 10vh;  
    margin: 1em;  
}

.footer{
    background-color: fuchsia;
    border: 0.5em solid gray;
    height: 10vh;
}

<div class='container'>
    <div class='sectionAndAside'>
        <div class='header'>header</div>
        <div class='nav'> nav</div>
     </div>
    <div class='middle'>
        <div class='section'>section
           <div class='article'>article
              <div class='conta'>
                <div class='hClass'>
                        <h1>h1</h1>
                        <h2>h2</h2>
                        <h3>h3</h3>
                    </div>
                    <div class='p'>
                        <p>this is p</p>
                    </div> 
                </div>
            </div>
        </div>
        <aside class='aside'>aside</aside>
      </div>
      <div class='footer'>footer</div>
</div>

我希望找到一种方式/解决方案/方法方法，并在我从头开始构建网站时学习如何有效地控制网站的布局。这张图片(底部)正是我想要复制的。我最终做到了，但它没有反应。最初我在控制 div 的位置时遇到了麻烦，但是 flexbox 帮助我解决了这个问题。现在的目标是学习如何让元素的垂直属性和水平属性一样表现。

Answer 1

使用属性 flex wrap :wrap;它有助于小屏幕。 https://scrimba.com/g/gflexbox