为什么最小高度不会增加以适应增加的内容

Question

我认为设置explicit属性会在必要时扩展以容纳其内容，但我很震惊地意识到它根本没有显示内容，特别是当我重新调整大小时。某些内容完全从显示中丢失。下面的代码不是确切的代码，但这是我能得到的最接近我的问题。

min-height

Answer 1

问题：当.box内的内容增加且浏览器的大小减少到移动版时，您可以看到问题。然后你可以看到真正的问题，内容是从蓝框中走出来的。

您可以在此处看到问题：https://jsfiddle.net/bro49tg7/3/将输出宽度调整为较小的屏幕。

解决此问题

将您的css代码更改为：

.box{
width: 50%;
min-height: 50px; /* changed this */
color: #fff;
}

Answer 2

就像Hunzaboy所说的那样，每个盒子都需要一个最小高度才能工作。看看这个小提琴：

https://jsfiddle.net/6zpek8m6/

.parent {
  min-height: 300px;
}
.box {
  min-height: 50px;
}