Upon examining the layout of this DOM structure, I noticed a flexbox container with two children. One child has a fixed size, while the other one shrinks with an overflow: hidden. My curiosity lies in finding a way for the content that overflows to remain visible without affecting the flow of the DOM.
ul.current {
list-style: none;
display: flex;
width: 40%;
margin: 0 auto;
}
li {
overflow: hidden;
}
li:last-child {
flex-shrink: 0;
}
li div {
border: 1px solid black;
background: green;
width: 10rem;
height: 10rem;
}
li:last-child {
margin-top: 2rem;
}
li:last-child div {
background: red;
}
/* GOAL */
section {
margin: 0 auto;
width: 40%;
}
.item {
position: absolute;
}
.item:last-child {
margin-top: 2rem;
margin-left: 5rem;
}
.content {
border: 1px solid black;
background: green;
width: 10rem;
height: 10rem;
}
.item:last-child .content {
background: red;
}<h3>Shrink the viewport to get an idea of what's the intended scenario</h3>
<ul class="current">
<li><div></div></li>
<li><div></div></li>
</ul>
<h3>Visual representation of the overlap behavior</h3>
<section>
<div class="item"><div class="content"></div></div>
<div class="item"><div class="content"></div></div>
</section>Essentially, I am seeking a solution where the images can "overlap" each other within a flexible context, ensuring compatibility with any number of cases.