Why is the <strong> element, an inline element, being pushed to a new line?
This configuration involves nested flex elements, which may seem complex but should not be too difficult to understand. It could be possible that I have a misconception about how flexbox operates.
Check out: 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>