The images below depict the concept I am trying to achieve. The first image shows a longer width while the second one represents a shorter width. The red blocks are positioned on the right and left sides, with the yellow block adjusting its width based on the container.
Here is my current approach:
/* the one with black border :) */
.container{
position: relative;
}
.red{
position: absolute;
top: 0;
width: 100px;
}
.red-left{
left:0;
}
.red-right{
right:0;
}
.yellow{
margin: 0 110px;
}
Although I am almost satisfied with this setup, I have noticed that when the red blocks exceed the height of the container, the container does not adjust its height accordingly. This behavior is expected since the children elements are positioned absolutely within the container.