Struggling to arrange 3 elements using flexbox while keeping them centered both horizontally and vertically.
Here is the desired layout:
https://i.sstatic.net/Uo6WS.png
This is my current attempt, but it's not working as expected. Can anyone spot the mistake?
.container {
width: 100%;
max-width: 800px;
height: auto;
margin: 0 auto;
background: pink;
display: flex;
flex-wrap: wrap;
flex-direction: column;
.first {
background: green;
height: 50px;
align-self: stretch;
}
.second {
background: blue;
height: 100px;
}
.third {
background: crimson;
height: 100px;
}
}<div class="container">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>Check out this demo on Fiddle: https://jsfiddle.net/u21uqs7q/