Flexbox中的文本不换行

Question

Flexbox中的文本不换行

6

请问有人可以告诉我为什么在一个行方向的 flex 容器中，div 中的文本无法正确换行而会溢出吗？

如果我将方向改为 section，文本就能正常换行了，我不明白原因...

html,
body {
  height: 100%;
}

body {
  overflow-y: scroll;
  margin: 0;
}

div,
main,
section {
  align-items: stretch;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  flex-wrap: nowrap;
  position: relative;
}

main {
  flex-grow: 1;
}

section {
  flex-flow: row nowrap;
  flex-grow: 1;
  justify-content: center;
  margin: 0 auto;
  max-width: 1280px;
  padding: 60px 0;
}

.content {
  flex-grow: 1;
  justify-content: start;
}

<body>
  <main>
    <section>
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla sagittis sem egestas molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
      </div>
    </section>
  </main>
</body>

- Xiaolin Wu

代码片段看起来正常工作，你可能有其他样式干扰了无法正常工作的部分。 - Pete

文本溢出的确切位置在哪里？我在你的代码片段中没有看到它。 - Levano

抱歉，我改变了代码。 - Xiaolin Wu

您是否有更多关于您试图如何格式化文本的信息？例如更改某些属性，比如flex-shrink，可能会带来重大变化，但这完全取决于您想要实现的具体目标。 - wpalmes

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Benjamin · Accepted Answer

让我们澄清结构：

main，section和div元素都是flex容器。
section是main的一个flex子项。
div是section的一个flex子项。
main不是flex子项，因为它的父级（body）不是flex容器。
所有的flex子项都设置为flex-shrink: 0。

这就是布局：

注意：问题中的大部分代码都不必要重现问题，所以我删除了它。
请注意：每个flex容器都已突出显示。

div,
main,
section {
  display: flex;
  flex-shrink: 0;
}

section {
  padding: 60px 0;
}

main    { background-color: lightgreen; }
section { border: 2px dashed red; }
div     { border: 1px dashed black; }
body    { margin: 0; }

<main>
  <section>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla sagittis sem egestas molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </div>
  </section>
</main>

以下是正在发生的情况：

div（黑色边框）上的 flex-shrink: 0 防止其收缩。
div 上的 flex-shrink: 0 扩展了其父元素 section（红色边框）。
section 上的 flex-shrink: 0 防止其收缩。
section 上的 flex-shrink: 0 不会扩展其父元素 main（绿色背景），因为 main 不是 flex 项目，flex-shrink 不适用。
main 是标准块级元素（即在“块格式化上下文”中的元素），应用默认的 overflow: visible。
如果将 body 元素设为 flex 容器，则 main 元素成为 flex 项目，指定的 flex-shrink: 0 生效，并且 main 根据其后代元素进行扩展。

因此，解决方案是启用收缩。

div,
main,
section {
  display: flex;
  flex-shrink: 1; /* adjusted */
}

section {
  padding: 60px 0;
}

main    { background-color: lightgreen; }
section { border: 2px dashed red; }
div     { border: 1px dashed black; }
body    { margin: 0; }

<main>
  <section>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget nulla sagittis sem egestas molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    </div>
  </section>
</main>