Search code examples
htmlcssflexboxword-wrap

Text not wrapping in flexbox

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>

Solution

  • Let's clarify the structure:

    1. Your main, section and div elements are flex containers.
    2. section is a flex item in main.
    3. div is a flex item in section.
    4. main is not a flex item because its parent (body) is not a flex container.
    5. All flex items are set to flex-shrink: 0.

    Here's the layout:

    • Note: Most of the code in the question is not necessary to reproduce the problem, so I removed it.
    • Note: Each flex container is highlighted.

    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:

    1. flex-shrink: 0 on div (black border) is preventing it from shrinking.
    2. flex-shrink: 0 on div is expanding its parent, the section element (red border).
    3. flex-shrink: 0 on section is preventing it from shrinking.
    4. 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.
    5. main is standard block-level element (i.e., an element in a block formatting context) and the default overflow: visible applies.
    6. If you make the 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>