Question

任何人都可以告诉我为什么行方向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>

Answer 1

让我们澄清一下结构：

您的main，section和div元素是灵活容器。
section是main中的灵活项目。
div是section中的灵活项目。
main不是灵活项目，因为其父级（body）不是灵活容器。
所有弹性项目都设置为flex-shrink: 0。

这是布局：

注意：问题中的大部分代码都不是重现问题的必要条件，因此我将其删除了。
注意：每个弹性容器都会突出显示。

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

这里发生了什么：

flex-shrink: 0阻止其缩小。

div

flex-shrink: 0

div

section阻止其缩小。

flex-shrink: 0

section

不

flex-shrink: 0

section

main

main是标准的块级元素（即块格式化上下文中的元素），the default overflow: visible适用。
如果将flex-shrink元素设为flex容器，则main元素将成为弹性项目，指定的body适用，main根据其后代进行扩展，以及。

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

＆＃13;

flex-shrink: 0

＆＃13;

main

＆＃13;

文本未包装在flexbox中

1 个答案: