CSS Div高度无法自适应内容/内容无法换行问题求助

我来帮你搞定这个问题！你遇到的核心问题是长文本无法自动换行，导致容器高度没法自适应内容，再加上CSS里有一些冗余/冲突的属性，才会出现横向滚动的情况。咱们一步步来解决：

先分析现有代码的问题 #

• .each-message 里同时写了 height: 100px 和 height: auto，虽然浏览器会取后面的属性，但这种冗余很容易混淆；
• .each-message-content 没有设置自动换行的规则，长文本会直接撑破容器或者触发横向滚动；
• .each-message-box 的 overflow: auto 其实没必要，反而可能带来不必要的滚动条。

修改后的完整代码 #

HTML（和你的代码一致，无需改动） #

<div className="message-box"> 
  <div className="each-message-box"> 
    <div className="each-message"> 
      <div className="each-message-date">Date</div> 
      <div className="each-message-content">ContentContentContentContentContentContentContentContentContentContent</div> 
    </div> 
  </div> 
</div>

优化后的CSS #

.message-box {
  width: 100%; /* 确保最外层容器占满宽度，可根据你的需求调整 */
}

.each-message-box {
  width: 100%;
  margin: 1px;
  /* 移除不必要的 overflow: auto，避免外层出现滚动条 */
}

.each-message {
  width: 270px;
  margin: 2px;
  border: 1px solid #ccc;
  height: auto; /* 明确让高度完全自适应内部内容 */
  overflow: hidden; /* 防止内容意外溢出容器，不需要的话也可以换成 overflow: visible */
  padding: 5px; /* 加一点内边距，让内容不贴着边框，体验更好 */
}

.each-message-date {
  border: 1px solid #ccc;
  font-size: 10px;
  color: #ccc;
  text-align: left;
  margin-bottom: 4px; /* 给日期和内容之间加一点间距，布局更美观 */
}

.each-message-content {
  width: 100%;
  border: 1px solid #ccc;
  text-align: left;
  border-radius: 10px;
  height: auto;
  padding: 8px; /* 内边距优化显示效果 */
  /* 关键：强制长文本自动换行 */
  word-wrap: break-word; /* 兼容旧版浏览器 */
  overflow-wrap: break-word; /* 现代浏览器标准属性 */
  white-space: normal; /* 确保文本正常换行，默认值但明确写出来更稳妥 */
}

关键修改点说明 #

1. 移除冗余的高度设置：把.each-message里的height:100px删掉，只保留height:auto，让容器高度完全由内部内容决定；
2. 强制文本换行：给.each-message-content加上word-wrap和overflow-wrap属性，不管文本多长，都会在容器宽度内自动换行，不会撑破容器或者出现横向滚动；
3. 优化布局细节：去掉不必要的overflow: auto，增加内边距和间距，让整体布局更美观自然。

现在测试一下，长文本会正常换行，.each-message和.each-message-content的高度都会自动适应内容，完全符合你的需求~

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