Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 67527

Stacked Divs Max Width of Parent

$
0
0

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>

Viewing all articles
Browse latest Browse all 67527

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>