This question addresses a clear problem: Flexbox - Img height conflict. However, the accepted answer does not meet my specific needs.
One potential solution involves using absolute and relative positioning. While this resolves sizing issues, it interferes with ZIndex, which is problematic for me due to overlapping elements on my site.
Another suggested solution is setting min-height to 0 and height to 100, but it only provides partial help compared to the absolute positioning approach.
I am seeking a way to create a vertical flexbox layout with two equal sections, one of which contains an image.
The desired outcome can be visualized in the following snippet. Although the sizing is correct, the issue lies with ZIndex as the yellow div fails to cover the image:
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cattainer{
display: flex;
background: blue;
flex-direction: column;
flex: 1;
position: relative;
}
.overlay{
flex: 1;
display: grid;
grid-template-rows: 100%;
grid-template-columns: 100%;
}
.overlayItem{
grid-area: 1/1/auto/auto;
}<html style="height: 100%; width: 100%">
<head></head>
<body style="
width: 100%;
height: 100%;
display: flex;
">
<div class="overlay">
<div class="overlayItem" style="display: flex;flex: 1;background: blue;flex-direction: column;">
<div style="background: red;flex: 1;"></div>
<div class="cattainer">
<img src="https://cdn.mos.cms.futurecdn.net/VSy6kJDNq2pSXsCzb6cvYF.jpg" >
</div>
</div>
<div class="overlayItem" style="background: yellow;flex: 1;"></div>
</div>
</body>
</html>