Is there a way to wrap parent around children with fixed widths without blank space left on the right? (No JS)

Question

If you run this snippet, the parent container (black) has extra space on the right side because the total width of children exceeds the parent's width. The children need to have fixed widths (equal widths). I would like to have the last child move below the preceding children (as it already does) but also avoid the extra black space on the right in the parent.

body {
  background: white;
}
div.container {
  color: white;
  background: black;
  margin: auto;
  padding: 1em;
  display:inline-block;
}
div.red {
  background-color: red;
  width: 200px;
  display:inline-block;
  margin: 5px;
  padding: 5px;
}
div.green {
  background-color: green;
  width: 200px;
  display:inline-block;
  margin: 5px;
  padding: 5px;
}
div.blue {
  background-color: blue;
  width: 200px;
  display:inline-block;
  margin: 5px;
  padding: 5px;
}

<div class="container">
  <div class="red">Red</div>
  <div class="green">Green</div>
  <div class="blue">Blue</div>
</div>