防止包裹在弹性项目中

Question

我有两个紧挨着的 flexbox 项目。左边的项目包含文本，不能换行。正确的项目包含 svg，我希望这些 svg 根据可用空间调整大小。我无法让它工作。

这是我所拥有的，但你可以看到文本换行：

.container {
  width: 300px;
  margin: 0 auto;
  border: 2px blue solid;
  
  display: flex;
  flex-wrap: nowrap; /* has no effect */
  justify-content: space-between;
}

.nowrap {
  flex: 1 1 auto;
  margin-right: 15px;
}

.images {
/*   flex: 0 0 auto; unsure of this */
  display: flex;
  max-height: 80px;
}

img {
  min-width: 0;
  height: auto;
  width: 100%;
}

<div class="container">
  <span class="nowrap">Never wrap</span>
  <div class="images">
    <img src="https://assets.codepen.io/3/kiwi.svg" />
    <img src="https://assets.codepen.io/3/kiwi.svg" />
    <img src="https://assets.codepen.io/3/kiwi.svg" />
    <img src="https://assets.codepen.io/3/kiwi.svg" />
  <div>
</div>

我已经开始使用不同（但相似）标记的CodePen。在那里我假设flex: 1 1 auto; 意味着该弹性项目具有“优先级”并且不会换行。但是因为它不起作用，我怀疑我对 flexbox 有根本的误解。 （也许 svg 让事情变得更加复杂，因为 svg 是文档，而不是图像）

作为一个额外的问题。我希望左右 flexbox 被推动部分 (justify-content: space-between)，如果容器宽度真的很大，请在 svgs 上应用 max-height 或 max-width。

谢谢！

Answer 1

nowrap 类中没有任何内容指示文本不要换行。

就是这样：

.nowrap {
   flex: 1 1 auto;
   margin-right: 15px;
}

添加这个：

.nowrap {
   flex: 1 1 auto;
   margin-right: 15px;
   white-space: nowrap;
   align-self: center; /* optional */
}