https://i.stack.imgur.com/BhPU0.png
Can the yellow square smoothly transition to the empty grey square and beyond in this layout setup? Each flex item represents a component that can utilize either 50% or 100% of the container width, information only known at render time.
I was contemplating using solely flexbox for this task, but uncertain of its feasibility.
.flex-container {
display: flex;
width: 200px;
height: 240px;
background: grey;
flex-wrap: wrap;
align-content: flex-start;
}
.flex-item {
width: 100px;
height: 100px;
}
.red {
background: red;
}
.blue {
background: blue;
width: 200px;
}
.yellow {
background: yellow;
}
.green {
background: green;
}<div class="container">
<div class="flex-container">
<div class="flex-item red"></div>
<div class="flex-item blue"></div>
<div class="flex-item yellow"></div>
<div class="flex-item green"></div>
</div>
</div>