フレックスボックス内でdivが重複しないようにしたい

Question

私は現在、最初のウェブサイトを開発中です。私は2つのdivがフレックスボックスの内側にお互いに置かれているところまで来ました。両方の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

.contentにflex-wrapプロパティを追加します。用

また

、代わりに代わりflex-basisを使用し、左右のコンテンツのためwidthを使用しての、以下のスニペットのように、速記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>