我不希望我的 div 在弹性盒内重叠

Question

我目前正在开发我的第一个网站。我已经到了这样的地步：我有两个 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

将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>