Column flex child won't shrink and wrap

Question

In this horizontal card layout demo the text content won't shrink and wrap. You can see some of text overflows the card.

h1, h2, p {
  font-family: Lato;
}

.section-heading {
  margin: 2rem 0 0.5rem
}

.user-card {
  border: 1px solid lightgray;
  border-radius: 5px;
  padding: 1rem;
  box-shadow: 4px 4px 12px 0px;
  max-width: 500px;
}

.user-card__heading {
  margin: 1rem 0 0;
  font-size: 2.5rem
}

.user-card__bio {
  margin: 0.25rem 0;
  font-size: 1.5rem;
}

.user-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-card__list-item:not(:last-of-type)::after {
  content: "|";
  color: gray;
}

.user-card__list-item p {
  margin: 0;
  color: gray;
  font-size: 1rem;
}

.user-card__image {
  border-radius: 50%;
  float: left;
  margin-right: 1rem;
}

/* FLEX */
.user-card--flex {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-height: 200px;
}

.user-card--flex .user-card__list {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  flex-wrap: wrap;
}

.user-card--flex .user-card__list-item {
  display: flex;
}

.user-card--flex .user-card__list-item:not(:last-of-type) {
  margin-right: 0.25rem;
}

.user-card--flex .user-card__list-item:not(:last-of-type) p {
  margin-right: 0.25rem;
}

<article class="user-card user-card--flex">
 <img class="user-card__image" src="https://www.fillmurray.com/200/200" />
 <h1 class="user-card__heading">Bill Murray</h1>
 <p class="user-card__bio">Actor, comedian, filmmaker, and writer.</p>
 <ul class="user-card__list">
  <li class="user-card__list-item">
   <p>Los Angeles, California</p>
  </li>
  <li class="user-card__list-item">
   <p>Member since August 18, 2018</p>
  </li>
 </ul>
</article>

The same code can be found in this StackBlitz demo.

I have tried the solutions mentioned here and here. Needless to say they didn't work.

I believe it has something to do with my use of flex-direction: column but I'm not sure what exactly.

@TemaniAfif, I considered that duplicate as an option, but I don't think the question is asking for the container to expand. I think it's asking for the text to wrap inside the fixed-width (500px) container. — Michael Benjamin, Jan 08 '20 at 20:56
@Michael_B hm, true .. I see both problem related but maybe it's not trivial. Feel free to reopen if you have a different opinion and an answer. — Temani Afif, Jan 08 '20 at 21:09

Column flex child won't shrink and wrap

0 Answers0