CSS高度限制，优先级高于宽度限制

Question

我有几个砖块（固定高度的块元素）就像文字一样位于线条上。我用CSS显示：inline-block（或inline-table）用于bicks。每块砖都包含来自外部源的任意文本。

我想设置这样的CSS规则，它通过自动换行（在给定高度的限制范围内）给出固定的砖块高度和最小可能宽度。

CSS：

/* my 'brick' rule*/
div{
  display: inline-block;
  height: 3.5em;
  /*width: 10ex;*/
  margin: 10px;
  vertical-align: top;
  border: 1px solid red;
}

HTML：

<div>
word word
</div>

<div>
word word word
</div>

<div>
word word word word
</div>

<div>
word a word longlongword word
</div>

<div>
word word
</div>

<div>
word the longwords longwords longlongword word
</div>

<div>
word word word
</div>

<div>
word word longlongword word
</div>

<div>
word word word word
</div>

参见示例：https://jsfiddle.net/1s5ff4bd/22/
红砖是我的问题，绿色显示我想要的东西（但不使用手动插入的<br>标签）。