内容Div过宽时容器Div未自适应扩展的CSS问题求助

问题重现代码 #

以下代码会出现容器无法跟随内容横向扩展、内容溢出穿透的情况：

* {box-sizing: border-box;}
body {
  height: 100vh;
  width: 100vw;
  background-color: red;
  margin: 0;
  padding: 0;
}
.container {
  background-color: lightblue;
  height: 100%;
  width: 100%;
}
.content {
  width: 3000px;
  background-color: lightgreen;
}

<div class="container">
  <div class="content">content</div>
</div>

解决方案1：用fit-content实现自适应宽度 #

调整body和容器的宽度属性，让容器跟随内容扩展，同时支持横向滚动：

* {box-sizing: border-box;}
body {
  min-height: 100vh; /* 保证至少全屏高度 */
  width: fit-content; /* 宽度由内容决定 */
  background-color: red;
  margin: 0;
  padding: 0;
  overflow-x: auto; /* 内容超出时显示横向滚动条 */
}
.container {
  background-color: lightblue;
  min-height: 100vh; /* 继承全屏高度 */
  width: 100%; /* 宽度随父级自适应 */
}
.content {
  width: 3000px;
  background-color: lightgreen;
}

解决方案2：修改容器的display属性 #

将容器设为inline-block或table，使其宽度由内容决定，同时保持全屏高度：

* {box-sizing: border-box;}
body {
  min-height: 100vh;
  background-color: red;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
.container {
  background-color: lightblue;
  min-height: 100vh;
  display: inline-block; /* 容器宽度由内容决定 */
  width: 100%; /* 内容较窄时占满屏幕宽度 */
}
.content {
  width: 3000px;
  background-color: lightgreen;
}

解决方案3：使用Flex布局 #

通过Flex布局让容器自适应内容，同时禁止压缩：

* {box-sizing: border-box;}
body {
  min-height: 100vh;
  background-color: red;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
}
.container {
  background-color: lightblue;
  min-height: 100vh;
  flex-shrink: 0; /* 禁止容器被压缩 */
  width: 100%; /* 内容较窄时占满屏幕 */
}
.content {
  width: 3000px;
  background-color: lightgreen;
}

以上三种方法均可实现容器随内容横向扩展，支持横向滚动查看完整内容，无溢出穿透问题。

内容的提问来源于stack exchange，提问作者Carl.t_