当任何项目不适合使用CSS且没有宽度媒体查询时，请包装所有项目？

Question

如果有不适合的物品，是否可以包装所有物品？

在以下示例中，当我将视口设置为800px时，最后一项将自动换行。 我也想包装第二件。 我不确定我要使用的术语是否正确。

我已经考虑过使用宽度媒体查询，但这无济于事，因为我不知道文本的宽度。

<div class='flex-container'>
  <div class='flex-item'>Hi there.</div>
  <div class='flex-item'>Mr Bond.</div>
  <div class='flex-item'>How are you?</div>
</div>  

.flex-item {
  border: 1px solid black;
  font-size: 60px;
  display: inline-block;
}

局限性：*我正在寻找纯CSS解决方案，而不是JS

Codepen： https ：//codepen.io/anon/pen/MVqRKa

Answer 1

如果我理解正确，则有一些可能性：

1. 您可以在第一个和第二个div框后插入<br />标签

<div class='flex-container'> <div class='flex-item'>Hi there.</div> <br /> <div class='flex-item'>Mr Bond.</div> <br /> <div class='flex-item'>How are you?</div> </div>

2. 您可以定义宽度https://codepen.io/Climb/pen/LdJvvJ