让多个项目的填充响应地适合div？

Question

我正在尝试创建一个自动响应新内容的小桌子 所以基本上我正在尝试的是给表中内容的填充不是固定大小的，而不是让填充自我调整以适应表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可以做到这一点

var height = $(this).height();
var width = $(this).width();

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

Answer 2

我想你想要处理边距（元素之间的空间），而不是填充。您可以使用display: -webkit-flex;，我在这里删除了一个小提琴（请记住，您可能必须使用带有#!/bin/bash source venv/bin/activate pip install -v -r requirements.txt >> scripts/scripts.out 前缀的旧版浏览器的回退 https://jsfiddle.net/hcoqnagr/