html - 文本未包装在 flexbox 中

Question

<分区>

Answer 1

让我们澄清一下结构:

1. 您的 main、section 和 div 元素是 flex 容器。
2. section 是 main 中的 flex 元素。
3. div 是 section 中的 flex 元素。
4. main 不是 flex 元素，因为它的父级(body)不是 flex 容器。
5. 所有 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>

这是发生了什么:

1. flex-shrink: 0 在 div(黑色边框)上防止它收缩。
2. flex-shrink: 0 在 div 上展开它的父元素，section 元素(红色边框)。
3. flex-shrink: 0 在 section 上防止它收缩。
4. flex-shrink: 0 在 section 上不扩展其父元素，main 元素(绿色背景), 因为 main 不是 flex 元素并且 flex-shrink 不适用。
5. main 是标准的 block 级元素(即， block 格式化上下文中的元素)和 the default overflow: visible适用。
6. 如果将 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>