如何设置可滚动div子元素宽度为内容自然宽度？

不需要硬编码文本容器宽度，通过CSS原生属性即可实现文本自动按<br>位置换行、超宽时容器横向滚动的效果，适配任意动态生成的文本内容。

核心实现原理 #

默认块级元素会自动撑满父容器的可用宽度，文本会受父容器宽度约束在<br>之外的位置自动折行。只要让文本容器的宽度自动收缩贴合内容本身的自然宽度（即所有<br>分隔行中最长一行的宽度），就能避免额外折行，配合父容器的overflow: scroll属性自动实现超宽滚动。

方案1：兼容性最佳实现（全浏览器支持） #

将文本容器设置为行内块元素，即可自动适配内容宽度，仅需修改.text类样式，删除原来硬编码的width: 300px，添加display: inline-block：

div.text {
  position: static;
  background-color: yellow;
  display: inline-block; /* 替换原硬编码width */
}

方案2：现代浏览器实现（语义更清晰） #

使用CSS原生的fit-content尺寸值，直接让元素宽度匹配内容自然宽度，适合不需要兼容IE等老旧浏览器的场景：

div.text {
  position: static;
  background-color: yellow;
  width: fit-content; /* 替换原硬编码width */
}

注意事项 #

• 不要给文本容器添加white-space: nowrap属性，该属性会让<br>的强制换行失效，导致所有文本挤成单行。
• 如果要求严格仅在<br>位置换行，不需要额外添加word-break类的折行属性，避免非预期的自动折行。

完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <title>overflow css property</title>

  <style type="text/css">

    div.container {
      position: absolute;
      width: 150px;
      height: 110px;
      border: 1px solid black;
      left: 30px;
      top: 20px;
      overflow: scroll;
    }

    div.text {
      position: static;
      background-color:yellow;
      display: inline-block;
    }

    
  </style>

</head>
<body>


  <div class='container' id='right'>
    <div class='text'>
    Lorem ipsum dolor sit amet, consectetur<br>
    adipiscing elit, sed do eiusmod tempor<br>
    incididunt ut labore et dolore magna aliqua.<br>
    Ut enim ad minim veniam, quis nostrud<br>
    exercitation ullamco laboris nisi ut aliquip<br>
    ex ea commodo consequat.<br>
    Duis aute irure dolor in reprehenderit in<br>
    voluptate velit esse cillum dolore eu fugiat<br>
    nulla pariatur. Excepteur sint occaecat<br>
    cupidatat non proident, sunt in culpa qui<br>
    officia deserunt mollit anim id est laborum.
    </div>
  </div>

</body>
</html>

内容的提问来源于stack exchange，提问作者René Nyffenegger