如何让设置overflow的父容器内子元素自身样式随内容一同溢出

出现这个问题的根本原因：子元素的默认宽度继承自父元素的内容区宽度，当子元素内部内容宽度超出父元素时，溢出的只是子元素的内容，子元素自身的盒模型（包括背景、边框、内边距对应的样式区域）并没有跟着内容扩展，所以滚动时超出父元素宽度的部分就看不到子元素的样式。

解决方案 #

• 方案1：给子元素设置width: fit-content，让子元素的宽度自动适配内部内容的实际宽度，子元素的样式区域会和内容尺寸完全匹配，滚动时样式就会跟着内容一同展示。
  参考代码：

  #child {
    width: fit-content;
    /* 保留你原有子元素的其他样式 */
  }
  

• 方案2：给子元素设置display: inline-block，该属性会让子元素的宽度由内部内容自动撑开，也能实现样式随内容延伸的效果，适合子元素内部是行内类内容排列的场景。
  参考代码：

  #child {
    display: inline-block;
    /* 保留你原有子元素的其他样式 */
  }
  

• 方案3：如果子元素内部内容的宽度是固定可预知的，直接给子元素设置明确的min-width值，保证子元素的最小宽度不小于内部内容的实际宽度即可。
  参考代码：

  #child {
    min-width: 1200px; /* 替换为你实际内容的最小宽度 */
    /* 保留你原有子元素的其他样式 */
  }
  

补充说明：如果你需要子元素支持横向滚动，可以把父元素的overflow-x: hidden修改为overflow-x: auto，避免横向内容被截断。

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