Could someone please clarify the significance of maintaining flex direction as column in this scenario? Changing it to row or row reverse causes some parts of the image to shrink in width.
Check out the JS Fiddle example: https://jsfiddle.net/fbshqg0c/7/
.main {
width: 100%;
}
.left {
position: relative;
display: flex;
flex-direction: column;
background-color: #fff;
width: 50%;
}
.text {
display: flex;
align-items: center;
}
.text-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
.width100 {
color: #fff;
text-align: center;
width: 100%;
}<div class="main">
<div class="left">
<img src="https://via.placeholder.com/350x150">
<div class="text text-img-overlay">
<div class="width100">
<h1>500x320</h1>
</div>
</div>
</div>
</div>