Why does the div tag have no height?

Question

css

The problem is that the ellipse-group div has a height of 0, but why? It has a lot of content in it, why is its height not equal to the height of the content inside it?

<div class="ellipse-group">
        <div class="ellipse">
          <p class="ellipse__text">
            <span class="ellipse__word_bold">5 минут</span> 
            до <br> центра
          </p>
        </div>
        <div class="ellipse">
          <p class="ellipse__text">
            <span class="ellipse__word_bold">300 метров</span> 
            до <br> Волги
          </p>
        </div>
        <div class="ellipse">
          <p class="ellipse__text">
            <span class="ellipse__word_bold">Экологически <br> чистое <br> </span> 
            место
          </p>
        </div>
        <div class="ellipse">
          <p class="ellipse__text">
            <span class="ellipse__word_bold">Бесплатная <br> кладовка <br> </span> 
            в подвале
          </p>
        </div>
        <div class="ellipse">
          <p class="ellipse__text">
            <span class="ellipse__word_bold">Бесплатное <br> парковочное <br> место</span> 
          </p>
        </div>
        <div class="ellipse">
          <p class="ellipse__text">
            <span class="ellipse__word_bold">Бюджетная <br><span class="ellipse__word_small"> отделка под ключ:</span> <br> </span> 
            въехал и живи
          </p>
        </div>
      </div>

.ellipse {
    box-sizing: border-box;
    background: url(../img/section1/ellipse.png) no-repeat;
    width: 153px;
    height: 146px;
    float: left;
    text-align: center;
    padding: 40px 0;
}

.ellipse__text {
    font-size: 17px;
    padding-left: 7px;
}

.ellipse__word_bold {
    font-weight: 700;
}

.ellipse__word_small {
    font-size: 15px;
    font-weight: 700;
}

.ellipse:nth-child(1) {
    margin: 207px 50px 0px 10px;
    padding: 55px 0;
}

.ellipse:nth-child(2) {
    margin-top: 139px;
    margin-right: 45px;
    padding: 55px 0;
}

.ellipse:nth-child(3) {
    margin-top: 87px;
    margin-right: 50px;
}

.ellipse:nth-child(4) {
    margin-top: 87px;
    margin-right: 45px;
}

.ellipse:nth-child(5) {
    margin-top: 139px;
    margin-right: 50px;
}

.ellipse:nth-child(6) {
    margin-top: 207px;
    margin-right: 13px;
}

Answer 1

overflow: hidden; may I help?

Answer 2

.ellipse-group {
overflow: hidden;
}

Answer 3

In the code inspector I look at what styles are applied to your .ellipse-group
I checked your markup with styles, everything is displayed, the height of the .ellipse-group is 353px