How shrink-wrap a div with flexbox?

What's the best way to shrink-wrap a div using flex-box? In the snippet below, I have a wrapper (the green border) shrink-wrapping the content (red & blue boxes) on all sides but the bottom.

How can I get this accomplished?

Here's a plunker demo: https://plnkr.co/edit/u89JPIbZObTYIfRejlO1?p=preview

.red {
  width: 100px;
  height: 50px;
  background-color: red;
}

.blue {
  width: 100px;
  height: 50px;
  background-color: blue;
}

.container2 {
  width: 400px;
  height: 300px;
  border: solid;
  display: flex;
  justify-content: center;
}

.wrapper2 {
  border: solid green;
  padding: 5px;
}

<div class="container2">
  <div class="wrapper2">
    <div class="red">x</div>
    <div class="blue">x</div>
  </div>
</div>

How shrink-wrap a div with flexbox?

2 Answers