My markup contains the following code:
.container {
display: flex;
width: 500px;
}
.col1 {
background: red;
height: 100%;
width: 50px;
}
.col2 {
background: blue;
flex: 1;
height: 200px;
}<div class="container">
<div class="col1"></div>
<div class="col2"></div>
</div>Upon viewing, I anticipated it would appear like this:
https://i.sstatic.net/d9eOU.png
However, when rendered in the browser and inspected, the height of .col1 is displayed as 0px. I presumed it should be 200px since .col2 stretches to that height. What could I possibly be doing wrong?