How to expand all inline block divs to fill parent? - html

Question

If I have something like this
<div class="A">
<div class="B"></div>
<div class="C"></div>
</div>
css
.B, .C {
display:inline-block;
}
For both B and C, the width wraps it's content and doesn't fill width of A fully. But if I set its width to 100%, then each width is equal to the width of A, which then extends A to twice it's original size in width.
How can I change it so that, the width of B + the width of C = the original width of A.
Basically increase the width of B and C such that it fills the width of A, but keep them inline.
Does anyone know?
Thanks

Answer 1

The best use-case for this would be using Flexbox as you are saying they are dynamic:
.A {border: 1px solid #99f;}
.A div {border: 1px solid #999; height: 10px;}
/* Flex Box */
.A {display: flex;}
.A div {flex: auto;}
Two:
<div class="A">
<div class="B"></div>
<div class="C"></div>
</div>
Three:
<div class="A">
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
</div>
Random:
<div class="A">
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
</div>

Answer 2

Please note that this is not as elegant as Praveen Kumar's answer, but I thought I'd post a table-based answer:
.A {
display: table;
height: 50px;
width: 100%;
border: 2px solid #000;
}
.A > div {
display: table-cell;
border: 1px solid #fff;
background-color: red;
}
Example 1:
<div class="A">
<div class="B"></div>
<div class="C"></div>
</div>
Example 2:
<div class="A">
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
</div>
Example 3:
<div class="A">
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
</div>
Example 4:
<div class="A">
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
</div>
Example 5:
<div class="A">
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
<div class="B"></div>
<div class="C"></div>
<div class="D"></div>
<div class="E"></div>
<div class="F"></div>
<div class="G"></div>
</div>
Again, the amount of children is irrelevant. You can have as many as you require.