Menu
Can anyone tell me why the text inside a div in a row-direction flex container doesn't wrap properly but it goes overflow?
If I change the direction to the section, the text will wrap, I don't understand why...
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>
856
Let's clarify the structure:
main, section and div elements are flex containers.section is a flex item in main.div is a flex item in section.main is not a flex item because its parent (body) is not a flex container.flex-shrink: 0.Here's the layout:
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>Here's what's happening:
flex-shrink: 0 on div (black border) is preventing it from shrinking.flex-shrink: 0 on div is expanding its parent, the section element (red border).flex-shrink: 0 on section is preventing it from shrinking.flex-shrink: 0 on section is not expanding its parent, the main element (green background), because main is not a flex item and flex-shrink doesn't apply.main is standard block-level element (i.e., an element in a block formatting context) and the default overflow: visible applies.body element a flex container, then the main element becomes a flex item, the specified flex-shrink: 0 applies, and main expands based on its descendants, as well.So the solution is to enable shrinking.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
