Leads Leads - 3 months ago 14
CSS Question

Inline-level element being forced to a new line in flexbox

How come the

<strong>
element, which is an inline element, is forced to a new line?

This setup has a flex within a flex, nothing particularly crazy I wouldn't have thought. So perhaps it's 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>




Answer

The <strong> element is a child in a flex container with flex-direction: column.

Hence, it will stack vertically with its siblings (which includes anonymous flex items, like in your code.)

Also note that:

  • When elements are children of a flex container, their display value is blockified.
  • In other words, display: inline, display: table, etc., will become display: block within the rules of a flex formatting context.

As an alternative, you can use flex auto margins to create your layout:

* {
  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>

Revised Codepen