CODEWITHSUNDEEP
htmlcssflexbox
AngularM
AngularM

Reputation: 16648

Long text is breaking my flexbox layout

I have two columns.

In my left column I have a p tag.

This p tag has a lot of text and goes really wide and outside my column.

When I remove my p tag the column layout looks fine.

I've tried setting a max-width on the p tag but this is not very good responsively. I want the p tag to be 100% width of the col div.

I want the text to go 100% width and wrap nicely.

.wrapper {
  display: flex;
  flex: 1 0 auto;
}

.col {
  flex: 1 0 auto;
}

p {
  max-width: 100px; /* I dont want to do this. */
}
<div class='wrapper'>
  <div class='col'>
    <p>small amount of text</p>
  </div>

  <div class='col'>
    <p>text very long text very longtext very long text very long text very long text very long text very long text very long text very long text very long text very long text very long.
    </p>
  </div>
</div>

Upvotes: 3

Views: 2780

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372109

You have flex-shrink disabled. Activate it.

.wrapper {
  display: flex;
}

.col {
  flex: 1 1 auto; /* flex-grow, flex-shrink, flex-basis */
}
<div class='wrapper'>
  <div class='col'>
    <p>small amount of text</p>
  </div>
  <div class='col'>
    <p>text very long text very longtext very long text very long text very long text very long text very long text very long text very long text very long text very long text very long.
    </p>
  </div>
</div>

With flex-shrink disabled, flex items won't shrink. (Another reason flex items often don't shrink is the min-width: auto / min-height: auto default. Why doesn't flex item shrink past content size? )

Upvotes: 6

Related Questions