Line level element that is forced to connect to a new line in flexbox

Question

Why is an element <strong>that is an inline element forced to a new line?

This setup has a bend inside flex, nothing particularly crazy that I would not have thought of. Perhaps this is just my misunderstanding of how flexbox works.

Take a look at: http://codepen.io/leads/pen/mEYOay

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  border: 1px solid red;
  height: 200px;
  max-width: 600px
}
.left {
  flex: 1;
  background: rgba(0, 0, 0, .3);
}
.middle {
  flex: 0 0 200px;
  background: rgba(0, 0, 0, .4);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.middle button {
  flex: 0 0 50px;
}
.middle p {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
strong {
  background: red;
}
.right {
  text-align: center;
  flex: 0 0 100px;
  background: rgba(0, 0, 0, .5);
}

<div class="container">
  <div class="left">
    <p>some content in the top left</p>
  </div>
  <div class="middle">
    <p>Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipisicing elit.
    </p>
    <button>CTA</button>
  </div>
  <div class="right">
    <p>CTA</p>
  </div>
</div>

Run codeHide result

Answer 1

The item <strong>is a child of the flex container c flex-direction: column.

, ( , .)

:

• , .
• , display: inline, display: table .. display: block flex.

flex auto :

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  border: 1px solid red;
  height: 200px;
  max-width: 600px
}
.left {
  flex: 1;
  background: rgba(0, 0, 0, .3);
}
.middle {
  flex: 0 0 200px;
  background: rgba(0, 0, 0, .4);
  text-align: center;
  display: flex;
  flex-direction: column;
}
.middle button {
  flex: 0 0 50px;
  margin-top: auto;   /* NEW */
}
.middle p {
  margin-top: auto;   /* NEW */
}
strong {
  background: red;
}
.right {
  text-align: center;
  flex: 0 0 100px;
  background: rgba(0, 0, 0, .5);
}

<div class="container">
  <div class="left">
    <p>some content in the top left</p>
  </div>
  <div class="middle">
    <p>Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipisicing elit.
    </p>
    <button>CTA</button>
  </div>
  <div class="right">
    <p>CTA</p>
  </div>
</div>

Hide result

Codepen