Struggling to find a pure CSS solution for this issue, so seeking advice.
Imagine three divs aligned horizontally next to each other. If one div overflows onto the next line, I want them to switch to a vertical stack layout. How can this be achieved?
I have included a code snippet with a button that adjusts the width of the parent div element when clicked, mimicking a window resize scenario where the divs need to transition from horizontal to vertical stacking.
Currently using JavaScript to monitor div height changes on element resizing, but looking for a CSS-only solution if possible.
function forceOverflow() {
let container = document.getElementsByClassName('container')[0];
if (container.className.indexOf('small') !== -1) {
container.className = "container";
} else {
container.className = "container small";
}
}.container {
display: flex;
flex-wrap: wrap;
background: yellow;
}
.container.small {
width: 300px;
}<div class="container">
<div>Dynamic string 1</div>
<div>Dynamic string 2</div>
<div>Dynamic string 3</div>
</div>
<button onClick="forceOverflow()">Force overflow</button>