I don't want my divs to overlap inside a flexbox - html

Question

I'm currently developing my first website. I've come to a point where I have two divs placed next to each other inside of a flexbox. Both divs have a width and height size in percentages. When I shrink the website, however, the right div overlaps the left div. If they're going to overlap I want them to be placed underneath each other. (It's about the right-side-content div overlapping the left-side-content div)
I've included my HTML and CSS code.
HTML:
<div class="content">
<div class="left-side-content">
<div class="intro">
<div class="brands">
<img src="images/logo%20ster.png" id="logo-ster"/>
</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

Add the flex-wrap property to .content.
Also, instead of using width for left and right content, use flex-basis instead, or incorporate it into the shorthand flex, as in the snippet below...
.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">
<img src="images/logo%20ster.png" id="logo-ster" />
</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>