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

Question

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

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

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

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

|--t--| |--ent--|

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

它们的父级具有以下 CSS：

display: flex; width: 100%; align-items: flex-start; justify-content: space-between;

如何解决包装问题？

小提琴：https://jsfiddle.net/njcs30g9/7/ 你可以看到Child 2 现在是如何分成两行的。

Answer 1

在 child 上使用 flex-shrink: 0 将防止它分裂。

更多关于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>