Css 当子元素水平溢出时，为什么忽略父元素的右填充

<div id="parent">
    <div id="child">Lorem ipsum</div>
</div>

#parent {
    width: 200px;
    height: 200px;
    padding: 20px;
    overflow-x: scroll;
}

#child {
    width: 500px;      
}

body {
  padding: 2em;
}

#parent {
  width: 200px;
  height: 200px;
  overflow-x: scroll;
  background: gray;
}

#child {
  width: 500px;
  background: yellow;
  margin: 20px;
  display: inline-block;
}

<div id="parent">
  <div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et turpis eu lorem consectetur blandit sed vel ligula. In lorem ligula, lacinia sed aliquet sed, congue quis tortor. In sed magna eros, eget blandit arcu. Nulla sit amet volutpat ipsum. Duis
    quis nisl massa. Sed ipsum magna, tempus non malesuada in, gravida et sapien. Fusce a odio nulla, quis ultrices mauris. Maecenas in tellus id massa fringilla molestie.</div>
</div>

Css相关问答推荐

转换间隙值时基于百分比的弹性元素&跳转

如何将表格单元格的最后一个子级与单元格底部对齐？

如何将Ant设计日期 Select 器的图标设置在输入 Select 器之前而不是之后

如何通过重复的网格区域来简化网格布局？

.NET 8 预览版 6 中不使用新项目模板提供 Blazor CSS 文件

如何让 v-col 变成可滚动的？

Vue3 组合 api 中的对象值样式

排除特定元素的目标元素

React Tabs 在 Tabs 之间垂直渲染标签内容

Vuetify 抽屉标签溢出/z-index

如何在 VS Code 中获得 JavaFX CSS 属性的自动完成功能？

在具有特定类的 td 之后，如何编写适用于该行上所有 td 元素的表行的 CSS Select 器？

不同的背景 colored颜色 取决于 URL

在活动状态下更改按钮的外观

如何在特定元素之前 Select 每个元素

属性nowrap被认为是过时的.建议使用较新的构造.它是什么？

如何通过 JavaScript 重新触发 WebKit CSS 动画？

最大宽度与最小宽度

从样式设置为 % 的元素获取宽度(以像素为单位)？

height： 100% 或 min-height： 100% 用于 html 和 body 元素？