переполнение: скрыто не работает с более чем 3 div

Question

Я борюсь с моим последним проектом с css скрытым потоком и div. По сути, сейчас у меня есть такая структура:

<div class = "parent">
    <div class = "son">
        <p class = "text">1</p>
    </div>

    <div class = "son">
        <p class = "text">2</p>
    </div>

    <div class = "son">
        <p class = "text">3</p>
    </div>
    ...
</div>

Поскольку я могу изменить количество дочерних элементов div, в родительском элементе div я использовал display flex, столбец flex-direction, а также в элементах div сына I использовал проприетарный flex: 1, чтобы иметь отзывчивую высоту. Пока что все работает отлично, потому что сын div устанавливает свой рост в зависимости от родителя и распределяется в равной степени. Следующим шагом, который я предпринял, было добавление в каждый элемент div числа, которое не должно влиять на высоту элемента div, а вместо этого должно появляться в элементе div, и если оно отключается из-за слишком большого размера, переполненную часть не следует видеть. Я архивирую это, создавая текст абзаца и устанавливая oveflow, скрытый в классе сына. Вы можете увидеть эффект на изображении.

Пока все хорошо. Проблема в том, что если я добавлю более 3-х сыновей с абзацем внутри. Все элементы изменяют размер и портят.

Мне бы хотелось, чтобы div остались точно такими же, как на первом изображении. Кто-то знает, что может быть? Я думаю, что это может быть гибким подходом для сына div, но мне действительно нужно, чтобы он работал, поэтому я застрял и у меня больше нет идей. Спасибо всем за ответы заранее.

Answer 1

Отредактированный ответ (согласно комментарию) - кажется, вам нужно только добавить height: 10rem; к .ch-number - Это имеет смысл, так как вы хотите играть с переполнением div.

Пример:

/* ------ GOOGLE FREE FONTS ------*/
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,700&display=swap'); /* Raleway -> font-family: 'Raleway';*/
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@900&display=swap'); /*Titillium font-family: 'Titillium Web', sans-serif;*/

.p1-slot{
  background-color: white;
  padding: 0;
  transition: .4s;
  padding-top: 1em;
  padding-left: 1em;
}

.p2-slot{
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  padding: 0;
  transition: .4s;
  background-color: rgb(8, 6, 39);
  width: 20%;
}

.p2-slot.active{
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);

  transition: .4s;
}

.site-wrapper{ /*ridefinisco il colore del wrapper solo per questa pagina*/
  background-color: white;
}

.display-4{
   font-family: 'Titillium Web', sans-serif;
   font-size: 2.5em;
   color: rgb(8, 6, 39);
}

.p2-slot .display-4{
  position: absolute;
  bottom: 0;
  right: .3em;
  color: white;
  z-index: 1;
}

.choosen{
  height: 100%;
  width: 15em;

  display: flex;
  flex-direction: column;
  padding-bottom: 1.5em;
}
.p2-slot .choosen{
  width: 16em;
}
.p2-slot .choosen{
  position: absolute;
  right: 0;
  z-index: 0;
}

.choose_box{
  flex: 1;
  background-color: rgba(217, 217, 217, .4);
  border-bottom: .5em solid white;
  border-collapse: collapse;
  transition: .4s;
  overflow: hidden;
}

.choose_box.blocked{
  background-color: rgb(8, 6, 39);
  background-position: right;
  background-repeat: no-repeat;
  background-size: contain;
}

.ch-number{
  font-family: 'Titillium Web', sans-serif;
  font-size: 12em;
  position: relative;
  color: rgba(217, 217, 217, .4);
  margin-top: -.5em;
  text-align: left;
height: 10rem; /* added*/
}

.choose_box.blocked .ch-number{
  color: var(--secondary_back);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  <div class="container-fluid site-wrapper row">
    <div class="col-8 p1-slot">
      <div class="choosen">
        <p class = "display-4">some</p>
        <div class="p-2 choose_box">
          <p class="ch-number">1</p>
        </div>
        <div class="p-2 choose_box">
          <p class="ch-number">2</p>
        </div>
        <div class="p-2 choose_box">
          <p class="ch-number">3</p>
        </div>
        <div class="p-2 choose_box">
          <p class="ch-number">4</p>
        </div>
        <div class="p-2 choose_box">
          <p class="ch-number">5</p>
        </div>
        <div class="p-2 choose_box">
          <p class="ch-number">6</p>
        </div>
        <div class="p-2 choose_box">
          <p class="ch-number">7</p>
        </div>
        <div class="p-2 choose_box">
          <p class="ch-number">8</p>
        </div>
      </div>
    </div>
    <div class="col-4 p2-slot text-right">
      <div class="choosen">
        <p class = "display-4">other</p>
      </div>
    </div>
  </div>

---

Старый ответ:

Поскольку вы не предоставили css код, вы можете изменить этот общий пример по мере sh. Я положил некоторые дополнительные заметки внутри.

.son {
  position: relative; /* since child .text use absolute position */
  overflow: hidden; /* since we want to "cut" .text string */
  background: silver; 
  height: 100px; width: 100px; 
  margin: 10px 0;
}
.text {
  position: absolute; bottom: -25px; left: 0; 
  margin: 0; /* .text is <p> so we need to clear that initial margins */
  font: bold 80px arial,sans-serif; 
  color: gray; 
}

<div class="parent">
  <div class="son">
    <p class="text">1</p>
  </div>
  <div class="son">
    <p class="text">2</p>
  </div>
  <div class="son">
    <p class="text">3</p>
  </div>
  <div class="son">
    <p class="text">4</p>
  </div>
  <div class="son">
    <p class="text">5</p>
  </div>
  <div class="son">
    <p class="text">6</p>
  </div>  
</div>