css - Flex 布局 - 2 列布局的文本换行问题

Question

我有一个 2 列布局，如下所示:

|--标题--|--内容--|

标题始终是一个词，因此是一行，但内容可以扩展到多行。当发生这种情况时，它会导致标题换行到第二行，从而破坏 UI，例如:

|--ti---| |--续-|

|--图--| |--ent--|

我尝试过的:给标题 flex-wrap: no wrap ，并给它一个宽度。然而，这只适用于多行内容的情况，因此不必要地增加与单行内容相邻的标题的宽度。

他们的 parent 有以下 CSS:


显示: flex ；
宽度:100%；
对齐元素: flex 启动；
证明内容:空格之间；


如何解决包装问题？

fiddle :https://jsfiddle.net/njcs30g9/7/您可以看到 Child 2 现在如何拆分为 2 行。

Answer 1

对 child 使用 flex-shrink: 0 将防止它 split 。

更多关于 flex-shrink .

.parent {
  display: flex;
  width: 100%;
  align-items: flex-start;
}
.child {
    flex-shrink: 0;
}

<div class='parent'>
  <div class='child'>
    <span class='child-l'>Child</span>
    <span class='child-r'>2</span>
  </div>
  
  <div class='content'>
    These are multiple lines of content that expand into 2 lines and breaks the UI.
  </div>
</div>