min-height,max-height和min-width,max-width的应用

我们经常会遇到一个场景，由于不确定一个盒子里的内容是多少而不能确定容器的高度，但容器又不不设置宽度，此时就需要设置一个最小宽度min-heght

首先创建两个div，第一个给固定高度height: 100px; 第二个给最小宽度min-height: 100px;如下：

代码示例

当两个容器中内容较小时，或者说内容的高度小于min-height高度时，运行结果无差异；

结果图

当两个容器中内容比较多，内容的高度大于min-height高度时，设置固定高度的容器的内容会溢出，而设置min-height的容器自适应内容的宽度。

示例代码

结果是第一个div内容会溢出，第二个div高度会自适应内容；

运行结果

当容器的内容太多时，会破坏页面的整体结构，此时我们可以设置一个最大高度max-height控制容器的最大高度;

具体代码

由于内容超出了最大高度max-height,可以使用overflow-y: auto; 属性使容器出现上下方向的滚动条；

运行结果

运用min-height和max-height的场景还是挺多的，像QQ，微信等聊天软件的连天输入框，还有空间，微博的留言板之类的，不能确定内容多少的容器可以使用这类样式，min-width与max-width的原理和最大最小高度相似，这里就不演示了。。。