<div class="boxes">
<div class="box"></div>
<div class="box"></div>
</div>
.boxes {
display: flex;
flex-wrap: wrap;
width: 40vw;
margin-bottom: 50px;
}
.box {
height: 200px;
flex-shrink: 1;
flex-grow: 1;
margin: 10px;
box-sizing: border-box;
border: 3px solid black;
}
const ro = new ResizeObserver(entries => {
for (let entry of entries) {
entry.target.style.borderRadius =
Math.max(0, 250 - entry.contentRect.width) +
'px'
}
})
console.log('horay');
// Only observe the 2nd box
ro.observe(
document.querySelector('.box:nth-child(2)')
)
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.