How to make <p> text move down instead of outside the div

Question

Hi, I have a problem with my card slider,

the tag keeps going out of bounds but I want it to slide down to fit the long description The entire text, how do I do that?

If you see when I use long text, the text ends up outside the delimiter, but I want it to stay inside

I tried using word-wrap: break-word; but it didn’t work for me

div.scroll-container {
  background-color: #7289da;
  white-space: nowrap;
  padding: 10px;
  overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

  .card {
    float: none;
    display: inline-block;
    zoom: 1;
  padding: 10px;
  width: 375px;
  height: 525px;
}

.container {
  padding: 2px 16px;
    background-color: #fff;
  color: #000;
height: 200px;
}

  .container p {
    color: #000;
    font-size: 20px;
  }

<div class="scroll-container" id="cardslist">
    <div class="card">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p>
  </div>
</div>

    <div class="card">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>

    <div class="card">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>
    <div class="card">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>
</div>

Answer 1

This is because you used white-space: nowrap; on the .scrollable parent element. If you remove this setting and set word-break: break-word; on .card, your text will wrap correctly.

However, this will break your layout, since you're obviously relying on nowrap to fit multiple elements into the same row.

Try to use flexbox layout. It's simpler and requires less code.

.scroll-container {
  background-color: #7289da;
  padding: 10px;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  
  /*Flexbox setup!*/
  display: flex;
}

.card {
  /*float: none; 
  display: inline-block;
  zoom: 1;
  height: 525px;*/
  
  padding: 10px;
  width: 375px;
  
  /* Added */
  flex-shrink: 0;
  word-break: break-word; 
}

.container {
  padding: 2px 16px;
  background-color: #fff;
  color: #000;
  height: 200px;
}

  .container p {
    color: #000;
    font-size: 20px;
  }

<div class="scroll-container" id="cardslist">
  <div class="card">
    <img src="icon.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p>
    </div>
  </div>

  <div class="card">
    <img src="icon.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>

  <div class="card">
    <img src="icon.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
  <div class="card">
    <img src="icon.png" alt="Avatar" style="width:100%">
    <div class="container">
      <h4><b>John Doe</b></h4>
      <p>Architect & Engineer</p>
    </div>
  </div>
</div>

Answer 2

CSS propertywhite-space: nowrapPrevents spaces from wrapping on div.scroll-container. Mozilla has a demo demo about this CSS property.

A possible fix is ​​to explicitly set it back to normal for your container class.

Since your dummy content has a fairly long word, it will still overflow. Using word-wrap: break-word; on the container class can also solve this problem.

Edit: As pointed out by @j08691 in the comments:

This is the updated part of the code:

div.scroll-container {
  background-color: #7289da;
  white-space: nowrap;
  padding: 10px;
  overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

  .card {
    float: none; 
    display: inline-block;
    zoom: 1;   
  padding: 10px;
  width: 375px;
  height: 525px;
  vertical-align: top;
}

.container {
  white-space: normal;
  word-wrap: break-word;
  padding: 2px 16px;
    background-color: #fff;
  color: #000;
height: 200px;
}

  .container p {
    color: #000;
    font-size: 20px;
  }

<div class="scroll-container" id="cardslist">
    <div class="card">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineernjifnnjknhbgvfdfcgvhbjnkmmnbgvfd</p>
  </div>
</div>

    <div class="card">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>

    <div class="card">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>
    <div class="card">
  <img src="icon.png" alt="Avatar" style="width:100%">
  <div class="container">
    <h4><b>John Doe</b></h4>
    <p>Architect & Engineer</p>
  </div>
</div>
</div>