文本未在 flexbox 中换行 [重复]答案

【问题标题】：Text not wrapping in flexbox [duplicate]文本未在 flexbox 中换行 [重复]
【发布时间】：2018-02-02 13:02:27
【问题描述】：

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

【问题讨论】：

似乎在 sn-p 中工作正常，你必须有一些其他风格搞砸了任何不适合你的东西
文本到底在哪里溢出？我在你的代码 sn-p 中没有看到它。
抱歉我改了代码
您是否有更多关于您尝试如何格式化文本的信息？更改某些属性（例如 flex-shrink）可能会产生巨大的变化，但这完全取决于您想要对文本完成什么。

标签： html css flexbox word-wrap

【解决方案1】：

让我们澄清一下结构：

您的main、section 和div 元素是弹性容器。
section 是 main 中的弹性项目。
div 是 section 中的弹性项目。
main 不是弹性项目，因为它的父项 (body) 不是弹性容器。
所有弹性项目都设置为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>

这是发生了什么：

flex-shrink: 0 上的 div（黑色边框）阻止它缩小。
div 上的 flex-shrink: 0 正在扩展其父元素 section 元素（红色边框）。
section 上的 flex-shrink: 0 正在阻止它缩小。
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>

【讨论】：

Plus1 的解释比我在骗子的回答中得到的更好:)
谢谢！但是instagram怎么都缩成0了o.o
@xdev，您必须发布代码以便对其进行审查。有很多因素会影响弹性项目的大小和灵活性。 flex-shrink 是这种情况下的问题。
但它的所有弹性项目似乎都有 flex-shrink 0 并且其中一些具有行方向