Long text is breaking my flexbox layout

Question

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>

Answer 1

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? )