父级div设置max-width时如何实现子容器内容自适应宽度

块级元素默认会撑满父容器宽度，仅设置max-width: 80%时容器会直接占满最大宽度，不会跟随内容弹性调整，可选择以下任意方案适配：

• 方案1：使用fit-content指定宽度规则（优先推荐，现代浏览器兼容性好）
  给容器同时设置宽度为内容适配，最大宽度限制为80%即可：

.container {
  width: fit-content;
  max-width: 80%;
  /* 如需容器水平居中，可额外加一行 margin: 0 auto; */
}

该方案的优势是容器仍为块级元素，默认独占一行，也支持正常的块级元素布局属性。

• 方案2：修改为table布局（兼容老旧浏览器）
  如果需要兼容IE等低版本浏览器，可将容器设置为table类型的块级元素，宽度会默认跟随内容调整，同时max-width规则仍生效：

.container {
  display: table;
  max-width: 80%;
}

• 方案3：修改为行内块元素
  如果允许容器和其他行内内容同排，可将容器设置为inline-block：

.container {
  display: inline-block;
  max-width: 80%;
}

如果需要该容器仍独占一行，可给其父元素添加块级伪元素做换行处理即可。

内容的提问来源于stack exchange，提问作者jatin chaudhari