html - 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。