浏览器窗口缩放/调整时Div内容溢出，需实现自适应布局

嘿，我来帮你搞定这个容器内容溢出的问题！先拆解你现有CSS里的核心问题，再给你针对性的修改方案：

现有代码的关键问题 #

你的.item类里有个white-space: nowrap属性——这会强制文本永远不换行，只要内容长度超过容器宽度，肯定会溢出，这是最主要的原因。另外display: table如果不配合宽度设置，容器只会自适应内容宽度，不会跟着窗口尺寸变化。

修改后的完整CSS方案 #

.item {
  display: block; /* 换成block布局更适合自适应窗口，若需要table特性可保留display: table并加width:100% */
  width: 100%; /* 让容器宽度占满父元素，随窗口宽度动态调整 */
  max-width: 100%; /* 确保容器不会超出父容器范围 */
  height: auto; /* 高度自动适应内容，也可根据需求用vh单位设置最小高度 */
  min-height: 80vh; /* 可选：让容器至少占视口高度80%，随窗口高度变化 */
  word-break: break-all; /* 保留这个，长单词/文本会自动换行 */
  white-space: normal; /* 去掉nowrap，让文本正常换行 */
  border: 1px solid silver; /* 简化border写法，更简洁 */
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
  overflow: auto; /* 内容过多时显示滚动条，避免溢出；也可用hidden直接隐藏溢出 */
  box-sizing: border-box; /* 确保border和padding算在宽度内，避免容器被撑大 */
}

.awesome {
  border-right: 1px solid silver; /* 补全你的border-right样式 */
  width: 100%; /* 子元素宽度适应父容器 */
  box-sizing: border-box; /* 同样保证子元素的border不超出父容器 */
}

关键修改的作用说明 #

• 移除white-space: nowrap：这是解决文本溢出的核心，让文本能根据容器宽度自动换行。
• 设置width: 100%：让容器宽度完全跟随父元素（比如body）的宽度变化，实现窗口自适应。
• 添加box-sizing: border-box：这个属性太重要了！它会把元素的border、padding都算在宽度/高度内，避免因为边框或内边距导致容器被撑大溢出。
• overflow: auto：如果内容实在太多，容器会自动显示滚动条，既保证内容都能被查看，又不会跑出容器范围。
• 可选的min-height: 80vh：用视口单位（vh）让容器高度随窗口高度动态调整，确保容器不会因为窗口变高而显得太矮。

额外注意点 #

如果你的.item有父容器，要确保父容器也设置了相对宽度（比如width: 100%），否则.item的width:100%只会跟随父容器的固定宽度，无法自适应窗口。

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