CODEWITHSUNDEEP
htmlcssflexbox
rodrigoArantes
rodrigoArantes

Reputation: 384

How to make text wrap when using Flexbox with flex-wrap: wrap?

The issue: In my current layout I have boxes that have a specific height based on a criterium. I want to display data in that box/div using columns, but when I do that, items that gets to a second column overflows the parent container's width. (see image below)

Note: Resize your screen size to have the result I showed on the screenshot below The issue

The result I'm looking for: I would like elements to take up as much space needed within the parent's container, potentially only overflowing on the Y axis (vertically). In other words, I'd like text to wrap into multiple lines. (see image below)

The result I'm looking for

Code: https://jsfiddle.net/sr9fj07m/

<div
      style="
        display: flex;
        flex-direction: column;
        height: 50px;
        background-color: blue;
        flex-wrap: wrap;
        align-content: flex-start;
      "
    >
      <div style="display: flex; flex-direction: row; align-items: center">
        <div style="background-color: red">Other text here</div>
      </div>
      <div style="display: flex; flex-direction: row; align-items: center">
        <div style="background-color: red">Another text here</div>
      </div>
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-shrink: 1;

        "
      >
        <div style="background-color: aqua;">
          random text goes here random text goes here random text goes here
          random text goes here
        </div>
      </div>
    </div>

How can that be achieved? Thanks!

Edited: What I'm looking for is a solution where I have no hardcoded widths and children rearranges automatically from top to bottom, wrapping into multiple columns (flex-direction: column; flex-wrap: wrap), but does not overflow parent width, and so break text into multiple lines.

Upvotes: 3

Views: 2250

Answers (1)

NickLans
NickLans

Reputation: 117

My understanding here is the flex items will grow to meet the contents of the children, so in this case the div that is wrapping the long text is growing to meet the text length. One solution to this would be to set a specific width on the divs. The below will achieve your desired result but you will need to play around with the div width on the 3rd div to get the correct result.

<html>
  <body>
    <div
      style="
        display: flex;
        flex-direction: column;
        height: 50px;
        background-color: blue;
        flex-wrap: wrap;
        align-content: flex-start;
        width: 600px;
      "
    >
      <div style="display: flex; flex-direction: row; align-items: center">
        <div style="background-color: red">Other text here</div>
      </div>
      <div style="display: flex; flex-direction: row; align-items: center">
        <div style="background-color: red">Another text here</div>
      </div>
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-shrink: 1;
          width: 400px;
        "
      >
        <div style="background-color: aqua;">
          random text goes here random text goes here random text goes here
          random text goes here
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 1

Related Questions