Imagine you have a parent container with a fixed width of 320px and the desire to let users add as many child elements as they want, all resizing automatically to fit the parent's width.
The goal is to maintain the parent div's width without any scrolling overflow, just having the child divs adjust proportionally.
For example,
If there is one child, it should take up 100% width. If there are two children, each should take up 50% width, and so on.
How can this be achieved?
I've tried various CSS approaches but couldn't find a solution. I suspect JavaScript might be needed, but my skills aren't sufficient for that. However, if a CSS-only solution exists, that would be ideal.
Thank you in advance.
(Note: The child divs will be text-free, with only background color and fixed height)
Sample code:
CSS
.box {
margin: 10px;
background: white;
border-radius: 6px;
border: 1px solid darken(white, 12%);
-webkit-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
-moz-box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
box-shadow: 0px 1px 4px rgba(50, 50, 50, 0.07);
float: left;
}
.line {
height: 6px;
opacity: 0.4;
-moz-opacity: 0.4;
filter:alpha(opacity=4);
margin-bottom: -1px;
float: left;
}
HTML
...
<div class="box">
<div class="line"> </div>
</div>
...
#will be able to add any amount of .lines