Making three divs fit perfectly in a parent div - html

Question

I have been building websites for way too long not to know how to do this. I'm embarrassed to ask. But I must.
I want a way to make any number of child divs within a parent div automatically span to the full width of the parent div.
My criteria for this fix are:
All of the child divs must be the exact same width
The width of the children divs must be responsive/dynamic
I would prefer a fix that doesn't involve sitting there and testing different percentages to find the exact percent width to prevent one of the children being wrapped or hidden (IE "display: if-there-was-an-easy-fix" instead of "width: 29.468749%")
I would love it if the fix would work with fixed margins and dynamic margins (margin: 10px and margin: 5%)
I'm 99% sure I knew the answer to this like a year ago but my current job requires that I work almost exclusively in tables, so I've forgotten how to do anything that isn't clunky and semantically disgusting.
#wrap {
width: 100%;
max-width: 500px;
background-color: gray;
height: 200px;
display: block;
}
.box {
width: 29.468749%;
height: 200px;
display: inline-block;
margin: 0;
padding: 0;
border: none;
}
#one {
background-color: aliceblue;
}
#two {
margin: 0 5%;
background-color: wheat;
}
#three {
background-color: coral;
}
<div id="wrap">
<div class="box" id="one">
</div>
<div class="box" id="two">
</div>
<div class="box" id="three">
</div>
</div>

Answer 1

use display: flex on parent and flex: 1 on child elements to get flexbox
#wrap {
width: 100%;
max-width: 500px;
background-color: gray;
height: 200px;
/*display:block;*/
display: flex;
}
.box {
/*width: 29.468749%;*/
/*display:inline-block;
/*margin:0;
padding:0;*/
flex: 1;
height: 200px;
border: none;
}
#one {
background-color: aliceblue;
}
#two {
margin: 0 5%;
background-color: wheat;
}
#three {
background-color: coral;
}
<div id="wrap">
<div class="box" id="one">
</div>
<div class="box" id="two">
</div>
<div class="box" id="three">
</div>
</div>

Answer 2

The first thing that you'll want to do is remove display: inline-block from the elements, and instead give them a float: left. From here you can get a 'default' full-width alignment by giving your elements a width of about 33.33% each. This would total 99.99%, which is 'close enough' to the full-width (unless you're on a screen of 10000px width). To ensure it's perfect though, you can use the CSS calc() property to ensure that it's exactly one third with width: calc(100% / 3).
This will work for regular elements, but your second box also has margin on it, which also factors into the width calculation in accordance with the box model. Because you're adding a 5% margin on both sides, , you'll want to subtract a total of 10% from the width calculation for this element. This can be done with width: calc((100% / 3) - (5% * 2)).
This gives you three equally wide elements, with one element having additional margins, as can be seen in the following:
#wrap {
width: 100%;
max-width: 500px;
background-color: gray;
height: 200px;
display: block;
}
.box {
width: calc(100% / 3);
height: 200px;
margin: 0;
padding: 0;
border: none;
float: left;
}
#one {
background-color: aliceblue;
}
#two {
margin: 0 5%;
width: calc((100% / 3) - (5% * 2));
background-color: wheat;
}
#three {
background-color: coral;
}
<div id="wrap">
<div class="box" id="one">
</div>
<div class="box" id="two">
</div>
<div class="box" id="one">
</div>
</div>
If you want to change the number of elements, you simply need to update the 3 in each of the width calculations to reflect the number of siblings. This can be made even easier with a CSS variable, meaning you only have to update the CSS in one place:
:root {
--columns: 3;
}
#wrap {
width: 100%;
max-width: 500px;
background-color: gray;
height: 200px;
display: block;
}
.box {
width: calc(100% / var(--columns));
height: 200px;
margin: 0;
padding: 0;
border: none;
float: left;
}
#one {
background-color: aliceblue;
}
#two {
margin: 0 5%;
width: calc((100% / var(--columns)) - (5% * 2));
background-color: wheat;
}
#three {
background-color: coral;
}
<div id="wrap">
<div class="box" id="one">
</div>
<div class="box" id="two">
</div>
<div class="box" id="one">
</div>
</div>