溢出：隐藏不能使用超过 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 中我使用了适当的 flex: 1 以获得响应高度。

到目前为止，一切都运行良好，因为子 div 会根据父级设置它们的高度并且平均分布。

我采取的下一步是在每个 div 中添加一个数字，该数字不应该影响 div 的高度，而是应该出现在 div 中，如果它因为太大而消失，则不应看到溢出的部分。我通过在子类上创建段落文本和设置溢出来实现这一点。您可以在图像上看到效果。

到目前为止一切顺利。问题是，如果我在里面添加超过 3 个子 div 和段落。所有 div 都调整大小并弄乱了。

我希望 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 代码，您可以根据需要修改此通用示例。我在里面放了一些额外的注释。

.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>