display:flex vs display:inline-flex

HTML

<h1>display: flex</h1>
<div class="container">
  <p class="eins">1xcccccccccxccccccccccccxc
  xcxcxc</br></p>
  <p class="zwei">2</p>
  <p class="drei">3</p>
</div>Und hier folgt Text
<h1>display: inline-flex</h1>
<div class="container">
  <p class="eins">1</p>
  <p class="zwei">2</p>
  <p class="drei">3</p>
</div>Und hier folgt Text

CSS

body {
      font: 100% sans-serif;
    }
    p {
      padding: 1.5em;
      color: white;
      margin: 0;
    }

    .container {
      width: 13em;
      border: 1px solid #333;
    }

    .eins {
      background-color: #99B1D7;
    }

    .zwei {
      background-color: #456188;
    }

    .drei {
      background-color: #B04C80;
    }

    .container {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
    }
    .container:last-child {
      display: -webkit-inline-box;
      display: -webkit-inline-flex;
      display: -ms-inline-flexbox;
      display: inline-flex;
    }