文本未包装在 flexbox 中

Question

谁能告诉我为什么行方向弹性容器中 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>

Answer 1

让我们澄清一下结构：

您的 main、section 和 div 元素是弹性容器。
section 是 main 中的弹性项目。
div 是 section 中的弹性项目。
main 不是弹性项目，因为它的父项 (body) 不是弹性容器。
所有弹性项目都设置为 flex-shrink: 0。

布局如下：

注意：题中大部分代码不是重现问题所必需的，所以我去掉了。
注意：每个弹性容器都突出显示。

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>

这是正在发生的事情：

flex-shrink: 0 on div（黑色边框）阻止它缩小。
flex-shrink: 0 on div 正在扩展其父元素，即 section 元素（红色边框）。
flex-shrink: 0 on section 正在阻止它缩小。

section

flex-shrink: 0 不是扩展其父元素，即 main 元素（绿色背景），因为 main不是弹性项目，flex-shrink 不适用。
main 是标准的块级元素（即 块格式化上下文中的元素 ）并且 the default overflow: visible 适用。
如果将 body 元素设为弹性容器，则 main 元素变为弹性项目，应用指定的 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>

文本未包装在 flexbox 中

Text not wrapping in flexbox

html

css

word-wrap

flexbox