CSS - карта не расширяется, чтобы показать весь текст

Question

Я работаю на стандартной карточке для отображения информации о данных. В моей карточке я вложил divs в родительский div, чтобы создать желаемый вид, который я собираюсь сделать. У меня проблема с тем, что моя карта не раскрывается для отображения всех данных. Оставшаяся половина моей карты пропущена и отображает текст вне карты. Я попытался настроить css rules / и избавиться от некоторых вложенных элементов div, но даже без текста divs и текста внутри родительского элемента div он все еще имеет ту же форму. У меня нет ограничений max-height / width в моем css. Из-за этого я не уверен, что заставляет карту обрезаться, как она есть.

profile-card - это код, который генерирует цвет фона карты.

Я также удалил заполнение, которое у меня было изначально на карте, думая, что это могло быть причиной, но оно имело не влияет. Я включил изображения внизу этой темы.

Вот мой код:

 <div class="col-sm-4">
          <div class="profile-card">
                     <div>
                     <h3>$2.7tn</h3>
                         </div>
                           <div>                            
                             <h4>GROSS STATE PRODUCT</h4>
                                </div>
                               <div class="col-md-6"> 
                                <p> 
                                    Growth Rate 2013-18
                                </p>
                                </div>
                                <div>
                                    <p>State Growth Rank</p>
                                </div>                                
                              <div class="col-md-12">
                                  <div class="col-md-6"> 
                                      <p> +0.8% </p>
                                  </div>
                                  <div class="col-md-6"> 
                                      <p>1</p>
                                  </div>
                              </div>
                        </div>
                        </div>

CSS:

.profile-card {
    background: #2A365B;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2), 0px 3px 4px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
    border-radius: 3px;
}

.profile-card h3 {
    font-family: Noto Sans;
    font-style: normal;
    font-weight: bold;
    font-size: 36px!important;
    line-height: 40px;
    /* or 111% */
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    color: #FFFFFF;
    border-radius: 6px;
}

.profile-card h4 {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 18px;
    /* or 129% */
    display: flex;
    align-items: center;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #FFFFFF;
}

.profile-card p {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    /* identical to box height, or 129% */
    letter-spacing: 0.5px;
    color: #FFFFFF;
}

Answer 1

Мне удалось решить мою проблему, добавив <div class="row"> до того, как div удержит содержимое карты

Answer 2

Просто скопировав ваш код, ваша ошибка не воспроизводится. Это может зависеть от того, что больше CSS действует в фоновом режиме.

Может ли это быть связано со свойством overflow?

Может быть попробовать что-то вроде

.profile-card {
     overflow: visible;
}