如何使子 div 比可滚动父级更宽答案

【问题标题】：How to make a child divs wider than the scrollable parent如何使子 div 比可滚动父级更宽
【发布时间】：2022-01-14 06:32:36
【问题描述】：

我正在尝试使子 div 溢出父 div。但是父 div 需要是可滚动的。

请看这里：https://jsfiddle.net/20o4uysj/2/

.container {
  width: 200px;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  height: 250px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
}

.extended {
  background: #f7f7f7;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  padding: 10px;
  width: 400px;
}

这就是我想要得到的：

这似乎是一个任务。尚未找到任何解决此问题的方法。

【问题讨论】：

我不认为您可以仅使用 HTML/CSS 来获得准确的结果（父 div 始终保持相同的宽度）。可以接受一点 Javascript 吗？

标签： html jquery css

【解决方案1】：

不幸的是你的容器有一个溢出-y : auto 这是不可能的

规范实现不允许在溢出-y 自动或滚动之外显示溢出-x

在此处查看更多详细信息 CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

【讨论】：

【解决方案2】：

如果你想使用正常的流程，那么jeremy-denis的答案是正确的。

但是当你添加一个位置时你会看到：absolute;在您的扩展课程中，它将创建您想要的外观。它允许元素在其父级之外流动，因为它已脱离常规流程。当然，这意味着其他元素的其余流程以及它们的位置也会变得混乱。

那么你可以用 Javascript 解决这个问题，但它可能会让人头疼！

【讨论】：