我不希望我的div在flexbox内重叠

Question

我目前正在开发我的第一个网站。我已经到了一个地方，我有两个div放在flexbox里面。两个div都有百分比的宽度和高度尺寸。但是，当我缩小网站时，右侧div与左侧div重叠。如果他们要重叠，我希望他们被放置在彼此之下。 （这是关于右侧内容div重叠左侧内容div）

我已经包含了我的HTML和CSS代码。

HTML：

<div class="content"> 
       <div class="left-side-content"> 
        <div class="intro"> 
         <div class="brands"> 
          <a href="#"><img src="images/logo%20ster.png" id="logo-ster"/></a> 
         </div> 

         <p class="top-title">Banner and endcard</p> 
         <h1>STER</h1> 
         <p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p> 
         <button class="view-project-button">View Project</button> 
        </div> 
       </div> 

       <div class="right-side-content"> 
        <img src="images/sponsorloop-collage.png"/> 
       </div> 

</div> 

CSS：

.content { 
    display: flex; 
    align-items: center; 
    height: 80%; 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
} 

.content .left-side-content { 
    width: 30%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
} 

.content .right-side-content { 
    width: 70%; 
    display: flex; 
    align-items: center; 
    justify-content: flex-end; 
} 

Answer 1

的flex-wrap属性添加到.content。

而且，而是采用width左，右内容，请使用flex-basis代替，或将其纳入速记flex，如下面的代码片段...

.content { 
 
    display: flex; 
 
    align-items: center; 
 
    height: 80%; 
 
    width: 90%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    flex-wrap: wrap; 
 
} 
 

 
.content .left-side-content { 
 
    flex: 1 0 30%; 
 
    height: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.content .right-side-content { 
 
    flex: 1 0 70%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: flex-end; 
 
}

<div class="content"> 
 
    <div class="left-side-content"> 
 
    <div class="intro"> 
 
     <div class="brands"> 
 
     <a href="#"><img src="images/logo%20ster.png" id="logo-ster" /></a> 
 
     </div> 
 

 
     <p class="top-title">Banner and endcard</p> 
 
     <h1>STER</h1> 
 
     <p class="intro-text">"STER" is a beauty, make-up and lifestyle channel on YouTube hosted by the 16 y/o Aster Marcus.</p> 
 
     <button class="view-project-button">View Project</button> 
 
    </div> 
 
    </div> 
 

 
    <div class="right-side-content"> 
 
    <img src="https://placehold.it/300x300" /> 
 
    </div> 
 

 
</div>