Div不会扩展其他文字

Question

我有一个div，在向其添加更多文本时不会向下扩展。我该怎么做呢我已将flex-direction设置为column。谢谢。

.blocks {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  vertical-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}
#a1 {
  margin: 0 auto;
  margin-top: 40px;
}
#a2 {
  margin: auto auto;
}
#a3 {
  float: left;
  margin-left: 25%;
}
#a4 {
  float: right;
  margin-right: 25%;
}
#a5{
  margin: 10% auto 0;
}

<div id="container">
  <div class="blocks" id="a1"><h4>1</h4></div>
  <div class="blocks" id="a2"><h4>2</h4></div>
  <div class="blocks" id="a3"><h4>3</h4></div>
  <div class="blocks" id="a4"><h4>4</h4></div>
  <div class="blocks" id="a5"><h4>5</h4><p>some text</p>some text<p>some text</p>some text<p>some text</p>some text</div>
</div>

Answer 1

只需移除您设置的高度即可。相反，您可以使用min-height: 100px。

Answer 2

请注意，您始终可以将高度设置为自动，以便div增长为内容

Answer 3

height显式设置元素高度。在您的情况下您可以删除height行或将max-height设置为您想要的值。

示例：https://jsfiddle.net/mw3ej40b/