Width not correct for flex within flex

Question

Take a look at the following code snippet

*,
*:after,
*:before {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
}

.container {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  .block {
    flex: 0 0 auto;
    display: flex;
    border: 4px dashed #000;
    background: coral;
    .content--left {
      margin: 10px;
      flex: 0 0 250px;
      background: lightblue;
    }
    .content--right {
      margin: 10px;
      flex: 0 0 300px;
      background: lightgreen;
    }
  }
}

<div class="container">
  <div class="block">
    <div class="content--left">
      Content Left
    </div>
    <div class="content--right">
      Content Right
    </div>
  </div>
</div>

The width of the container is calculated without taking the flex-basis into account. I can't find out how I can fix this.

It also happend when .container is display: inline-block;.

Does anybody know how we can control the width in this case?