Make child divs inside a parent div equal width and fluid

Question

How can I make the 3 child divwith class .box have the same width while fluidly occupying the entire parent container div while staying inline.

Here is a fiddle

#container {
  width: 20em;
  background: red;
  text-align: center;
}
.box {
  display: inline-block;
  margin: 1em;
  border: 1px solid #000;
}

<div id="container">

  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>

</div>

Answer 1

use CSS flexbox for that

#container {
  width: 20em;
  display: flex;
  background: red;
  text-align: center;
}
.box {
  flex: 1;
  border: 1px solid #000;
}

<div id="container">
  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>
</div>

OR

use inline-block as you already are using, with a few tweaks.

* {
  box-sizing: border-box
}
#container {
  width: 20em;
  background: red;
  text-align:center
}
.box {
  font-size: 16px;
  display: inline-block;
  width: calc(100% / 3);
  border: 1px solid #000;
}

<div id="container">
  <div class="box">test</div><div class="box">test</div><div class="box">test</div>
</div>

OR

use CSS tables for old browsers support

#container {
  width: 20em;
  display: table;
  background: red;
  text-align: center;
}
.box {
  display:table-cell;
  border: 1px solid #000;
}

<div id="container">
  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>
</div>

Answer 2

display:table version:

#container {
  width: 20em;
  background: red;
  text-align: center;
  display: table;
  table-layout: fixed;
  border-spacing: 1em;
  /* instead the margin:1em; you applied to children */
}
.box {
  display: table-cell;
  ;
  border: 1px solid #000;
}
.middle{vertical-align:middle;}

<div id="container">

  <div class="box">test</div>
  <div class="box">test</div>
  <div class="box">test</div>

</div>
<hr/>
<div id="container">

  <div class="box">test
    <br/>+ 1line ?</div>
  <div class="box">test</div>
  <div class="box middle">test</div>

</div>

table-layout:fixed will fix width value you set, for main container and children.

if children(table-cell) have no width set, they will spray evenly

#container {
  width: 20em;
  background: red;
  text-align: center;
  display: table;
  table-layout: fixed;
  border-spacing: 1em;
  /* instead the margin:1em; you applied to children */
}
.box {
  display: table-cell;
  ;
  border: 1px solid #000;
}
.middle{vertical-align:middle;}

<div id="container">

  <div class="box">test test test test </div>
  <div class="box">test</div>
  <div class="box">test</div>

</div>
<hr/>
<div id="container"class=" bis ">

  <div class="box">testtesttesttest testtesttest</div>
  <div class="box">test</div>
  <div class="box">test</div>

</div>