title: Bootstrap cards - text coming out of the cards
body: <p>I developed 4 bootstrap cards in 4 different columns. Within each of these cards, I created a new card that contains some type of information.</p>
  
  <p>My problem is that the text comes out of the card when I reduce the screen size (responsive test). What is my problem and how can I solve it?</p>
  
  <p>Thanks !</p>
  
  <p><a href="https://www.codeply.com/p/nr3UjwcvhZ" rel="nofollow noreferrer">DEMO</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.cardsZone {
    margin-top: 2%;
    width: 80%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
  }
  
  .myCards {
    background: #E7EAF180 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    border: none;
    height: 100%;
  }
  
  .card-deck .card {
    margin-left: 0px;
  }
  
  .mysmallCcards {
    width: 100%;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 20px #BCBCCB47;
    border-radius: 8px;
    border: none;
    margin-top: 20px;
  }
  
  .card-header:first-child {
    border-radius: calc(9px - 1px) calc(9px - 1px) 0 0;
  }
  
  .mycardHeader {
    background-color: white;
    padding: 8px;
  }
  
  .imgDash {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }
  
  .brandName {
    text-align: left;
    font-family: 'Noto Sans', sans-serif;
    font-size: 22px;
    letter-spacing: 0;
    color: #4D4F5C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 0px;
  }
  
  .subtitledash {
    text-align: left;
    font-family: 'Noto Sans', sans-serif;
    font-size: 13px;
    font-weight: bold;
    ;
    letter-spacing: 0;
    color: #4D4F5C;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 28px;
  }
  
  .imgusersDash {
    width: 24px;
    height: 24px;
    transform: matrix(1, 0, 0, 1, 0, 0);
    border-radius: 8px;
  }
  
  .usrDash {
    margin-top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    line-height: 24px;
    text-align: center;
    background: #4981C226;
    font-size: 13px;
    font-family: 'Noto Sans', sans-serif;
    letter-spacing: 0;
    color: #4981C2;
  }
  
  .p1 {
    background: #EFF0F2 0% 0% no-repeat padding-box;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Noto Sans', sans-serif;
    letter-spacing: 0;
    color: #BCBCCB;
    padding: 3px 7px 3px 8px;
    text-align: center;
  }
  
  .duracaoDash {
    background: #D9DAE2 0% 0% no-repeat padding-box;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Noto Sans', sans-serif;
    color: #BCBCCB;
  }
  
  .card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 8px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;div class="six" style="height: 75%;"&gt;
    &lt;div class="card-deck cardsZone"&gt;
      &lt;div class="card myCards"&gt;
        &lt;div class="card-body" style="overflow-y: auto; overflow-x:hidden;"&gt;
          &lt;div&gt;
            &lt;div class="card mysmallCcards"&gt;
              &lt;div class="card-header mycardHeader"&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash"&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;
                    &lt;span class="brandName card-title card-text"&gt;Settings in the world&lt;/span&gt;
                    &lt;p class="subtitledash card-subtitle card-text"&gt;Test Settings&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;span class="p1"&gt;1&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;Flex item&lt;/div&gt;
                  &lt;div class="ml-auto p-2"&gt; &lt;span class="duracaoDash"&gt;00:00:00&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card myCards"&gt;
        &lt;div class="card-body" style="overflow-y: auto;"&gt;
          &lt;div&gt;
            &lt;div class="card mysmallCcards"&gt;
              &lt;div class="card-header mycardHeader"&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash"&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;
                    &lt;span class="brandName card-title card-text"&gt;Settings in the world&lt;/span&gt;
                    &lt;p class="subtitledash card-subtitle card-text"&gt;Test Settings&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;span class="p1"&gt;1&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;Flex item&lt;/div&gt;
                  &lt;div class="ml-auto p-2"&gt; &lt;span class="duracaoDash"&gt;00:00:00&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card myCards"&gt;
        &lt;div class="card-body" style="overflow-y: auto;"&gt;
          &lt;div&gt;
            &lt;div class="card mysmallCcards"&gt;
              &lt;div class="card-header mycardHeader"&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash"&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;
                    &lt;span class="brandName card-title card-text"&gt;Settings in the world&lt;/span&gt;
                    &lt;p class="subtitledash card-subtitle card-text"&gt;Test Settings&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;span class="p1"&gt;1&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;Flex item&lt;/div&gt;
                  &lt;div class="ml-auto p-2"&gt; &lt;span class="duracaoDash"&gt;00:00:00&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="card myCards"&gt;
        &lt;div class="card-body" style="overflow-y: auto;"&gt;
          &lt;div&gt;
            &lt;div class="card mysmallCcards"&gt;
              &lt;div class="card-header mycardHeader"&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgDash"&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;
                    &lt;span class="brandName card-title card-text"&gt;Settings in the world&lt;/span&gt;
                    &lt;p class="subtitledash card-subtitle card-text"&gt;Test Settings&lt;/p&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;img src="https://lh3.googleusercontent.com/GSwsSV5GzGFyheupOV4x6deWq7yekyqbpOF_wp5wrfhCNjiDYu1pxYTbYNTip-e6Xi0" class="img-responsive imgusersDash"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="d-flex"&gt;
                  &lt;div class="p-2"&gt;
                    &lt;span class="p1"&gt;1&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="p-2"&gt;Flex item&lt;/div&gt;
                  &lt;div class="ml-auto p-2"&gt; &lt;span class="duracaoDash"&gt;00:00:00&lt;/span&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Problem</strong></p>
  
  <p><img src="https://i.stack.imgur.com/et9ka.png" alt="Image"></p>