xde*_*dev 2 html css css3 word-wrap flexbox
谁能告诉我为什么行方向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>让我们澄清一下结构：
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亮div（黑色边框）可防止其缩小。flex-shrink: 0on div正在扩展其父section元素（红色边框）。flex-shrink: 0在section被阻止其萎缩。flex-shrink: 0对section被不扩大其母公司的main元素（绿色背景），因为main不是柔性项目，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>