Tenho quatro divs
, as três primeiras divs
preciso que fique na primeira linha, e a quarta div
logo onde finaliza a primeira div
, porém, quando uso display: flex
para manter as três primeiras divs
na mesma linha, a quarta div inicia após a altura do maior elemento flex:
body {
margin: 0;
height: 100vh;
font-family: Helvetica neue, roboto;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-flow: wrap;
}
.div-1 {
background-color: purple;
width: 30%;
height: 30%;
}
.div-2 {
background-color: red;
width: 30%;
height: 30%;
}
.div-3 {
background-color: green;
width: 30%;
height: 80%
}
.div-4 {
background-color: aquamarine;
width: 30%;
height: 80%;
}
<div class="container">
<div class="div-1">
conteudo div 1
</div>
<div class="div-2">
conteudo div 2
</div>
<div class="div-3">
conteudo div 3
</div>
<div class="div-4">
conteudo div 4
</div>
</div>
O resultado que eu gostaria de ter:
Há alguma forma de manter a minha quarta div
logo onde finalizar a primeira div
?