Arranged divs with flex - increasing div is moving other divs [duplicate] - html

Question

This question already has answers here:
Remove space (gaps) between multiple lines of flex items when they wrap
(1 answer)
How does flex-wrap work with align-self, align-items and align-content?
(2 answers)
Closed 5 years ago.
I already posted a question here in
Arrange a few divs
The problem is that the div on the right side is increasing and the divs content3 and 4 are moving down, but the should stay right under content_1
here ist the code
body {
margin: 0;
}
#wrapper {
width: 600px;
display: flex;
height: 200px;
margin: 0 auto;
}
.first {
flex: 2;
display: flex;
flex-wrap: wrap;
}
#content_1 {
background: red;
width: 100%;
}
#content_2 {
flex: 1;
background: #aaa;
}
#content_4 {
flex: 1;
background: #ddd;
}
#content_3 {
flex: 1;
background: #eee;
}
<div id="wrapper">
<div class="first">
<div id="content_1">content_1</div>
<div id="content_2">content_2</div>
<div id="content_3">content_3</div>
</div>
<div id="content_4">content_4</div>
</div>
Can someone help?

Answer 1

Maybe you need it to be responsive, so like this:
body {
margin: 0;
}
#wrapper {
display: flex;
height: 100vh;
margin: 0 auto;
}
.first {
flex: 2;
display: flex;
flex-wrap: wrap;
}
#content_1 {
background: red;
width: 100%;
}
#content_2 {
flex: 1;
background: #aaa;
}
#content_4 {
flex: 1;
background: #ddd;
}
#content_3 {
flex: 1;
background: #eee;
}
<div id="wrapper">
<div class="first">
<div id="content_1">content_1</div>
<div id="content_2">content_2</div>
<div id="content_3">content_3</div>
</div>
<div id="content_4">content_4</div>
</div>
And if you want to use fixed height for sections you need to add alignment property to the #wrapper in order to keep 3 & 4 always under 1:
body {
margin: 0;
}
#wrapper {
display: flex;
margin: 0 auto;
width:600px;
align-items: flex-start; /*added this*/
}
.first {
flex: 2;
display: flex;
flex-wrap: wrap;
}
#content_1 {
background: red;
width: 100%;
height:40px;
}
#content_2 {
flex: 1;
background: #aaa;
height:40px;
}
#content_4 {
flex: 1;
background: #ddd;
height:150px;
}
#content_3 {
flex: 1;
background: #eee;
height:40px;
}
<div id="wrapper">
<div class="first">
<div id="content_1">content_1</div>
<div id="content_2">content_2</div>
<div id="content_3">content_3</div>
</div>
<div id="content_4">content_4</div>
</div>