html - 让多个元素的填充响应地适合 div？

Question

我正在尝试创建一个自动响应新内容的小表格。
所以基本上我正在尝试的是让表格中的内容填充不是固定大小
而不是让填充 self 调整以适应表格 100%。
为了更好的理解，这里有一个小例子:

.table{
  width: 800px;
  height: 600px;
  text-align: center;
  background-color: #FBEFF2;
  position: relative;
}
#cell{
  width: 120px;
  height: 500px;
  background-color: grey;
}
#cell p{
  background-color: rgb(200,200,200);
  word-wrap: break-word;
  padding-top: 5%;
  padding-bottom: 5%;
  padding-left: 4px;
  padding-right: 4px;
}
.explanation {
  position: absolute;
  top: 100px;
  width: 200px;
  left: 180px; 
}

<div class="table">
  <div id="cell">
    <p>Adressen</p>
    <p>ALKIS</p>
    <p>Liegenschaften</p>
    <p>Adressen</p>
    <p>ALKIS</p>
    <p>Liegenschaften Big enougth to fit 3 lines</p>
    <p>Adressen</p>
    <p>ALKIS</p>
    <p>Liegenschaften</p>
  </div>
</div>
<p class="explanation">I want the padding of the "p" elements to automaticly fit to the bottom of #cell. If I would add another "p" element to #cell the padding of all the other "p's" should responsively shrink until all "p" elements <br />fit again...
<br />Possible?
</p>

是的，我想处理填充!我已经完成了表格，但每次我向行添加新内容时它都会弄乱。 那么如何在不给它固定大小的情况下自动将文本的填充适合行呢？

希望你能帮助我!

Answer 1

Flexbox 可以做到这一点

.table {
  width: 180px;
  height: 300px;
  text-align: center;
  background-color: #FBEFF2;
  position: relative;
  display: inline-block;
  /* for demo */
  vertical-align: top;
  /* for demo */
}
.cell {
  display: flex;
  flex-direction: column;
  width: 120px;
  height: 500px;
  background-color: grey;
}
.cell p {
  background-color: rgb(200, 200, 200);
  word-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  margin: 2px;
}

<div class="table">
  <div class="cell">
    <p>Adressen</p>
    <p>ALKIS</p>
    <p>Liegenschaften</p>
    <p>Adressen</p>
    <p>ALKIS</p>
    <p>Liegenschaften Big enougth to fit 3 lines</p>
    <p>Adressen</p>
    <p>ALKIS</p>
    <p>Liegenschaften</p>
  </div>
</div>

<div class="table">
  <div class="cell">
    <p>Adressen</p>
    <p>ALKIS</p>
    <p>Liegenschaften</p>
    <p>Adressen</p>
    <p>ALKIS</p>
    <p>Liegenschaften Big enougth to fit 3 lines</p>
  </div>
</div>