Text is not wrapping when max-width is set [duplicate] - css

Question

This question already has answers here:
How can I have text wrap in a child element of an element with nowrap?
(2 answers)
CSS white-space nowrap parent, wrap child
(1 answer)
Closed 24 days ago.
I am trying to make a horizontal scrolling container that contains a list of cards. Each card contains a set image and has details (title and description). The sizes of the cards vary depending the amount of text that is in the details. The max-width a card can grow to is 45em. Even when a card has a max-width, the text on the details side does not wrap and flows out of the card. I think my problem is because of the white-space: nowrap on the container div, but I'm not sure how to correct it.
.c-card {
display: flex;
flex-direction: column;
gap: 1em;
}
#media screen and (min-width: 32em) {
.c-card {
max-width: 45em;
flex-direction: row;
}
}
.container {
overflow: x-scroll;
padding-left: 0;
white-space: nowrap;
}
.container__listItem {
display: inline-block;
margin-right: 1em;
}
<ul class="container">
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>
Lorem ipsum dolor sit amete</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
Lorem ipsum dolo.
</h3>
<p>Lorem ipsum dolo.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ullamcorper sit amet risus nullam eget felis.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
</ul>

Answer 1

You're absolutely right. Resetting white-space behavior on the details element resolves the problem.
.c-card {
display: flex;
flex-direction: column;
gap: 1em;
}
#media screen and (min-width: 32em) {
.c-card {
max-width: 45em;
flex-direction: row;
}
}
.container {
overflow: x-scroll;
padding-left: 0;
white-space: nowrap;
}
.container__listItem {
display: inline-block;
margin-right: 1em;
}
.c-card__details {
white-space: normal;
}
<ul class="container">
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>
Lorem ipsum dolor sit amete</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt Lorem ipsum dolo.
</h3>
<p>Lorem ipsum dolo.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ullamcorper sit amet risus nullam eget felis.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
</ul>