I have a flexbox that acts as a container for stack of divs that are layered on top of each other. This div has a height, width, min-height & min-width set.
The issue is one or more "layer" divs could contain a background image that is larger than the set dimensions of the container.
Because I have the position set to absolute on the layer images it expands outside of the parent div bounds.
I am looking for a solution where I do not need to set the height & width on the layer divs. Is there one?
.stack-container {
height: 800px;
min-height: 400px;
width: 1000px;
min-width: 600px;
}
.layer {
position: absolute;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
<div class="stack-container"><div class="layer"></div><div class="layer"></div><div class="layer"></div><div class="layer"></div></div>