CSS 嵌套滚动条与动态内容以 100% 的宽度重叠

debugcn 发表于 Dev

克罗诺克利

下面的代码显示了两个嵌套的 div，每个都有自动 Y 滚动。

是否有 CSS 解决方案允许用户查看内部滚动条但将内部 div 保持在 100% 宽度？

div {
  background: rgba(0, 0, 0, 0.2);
  width: 200px;
  height: 400px;
  overflow-y: auto
}
#outer { height: 400px; }
#inner { height: 200px; }
button { float: right; color: #F60}

<button onclick="document.getElementById('outerContent').innerHTML='smaller content does not need to scroll #inner should should still be 100% width of #outer'">TRY WITH SMALLER CONTENT</button>

<div id='outer'>
  <span id='outerContent'>Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
  causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which causes scroll Some long content which
  causes scroll</span>

  <div id='inner'>INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV
    ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR INNER DIV ALSO NEEDS TO SCROLL BUT I CANT SEE THE SCROLLBAR
  </div>
</div>

农业资源管理系统

是的，这很有可能。

你需要的是申请width:auto和display:block到#inner。由于这些默认应用在大多数（或所有？）浏览器中，您实际上不需要设置这些。但是，当您在 CSS 行 3 ( div { width: 200px }) 中应用固定宽度时，您将删除#inner将调整为其父级宽度的默认行为。

您可以通过单独应用于width:200px而#outer不是两个 div来解决此问题：

/* The fixed width is removed from div... */
div {
  background: rgba(0, 0, 0, 0.2);
  height: 400px;
  overflow-y: auto
}

/* ...and applied only to #outer */
#outer { height: 400px; width: 200px; }
#inner { height: 200px; }

看看这个小提琴是如何工作的

或者你也可以申请width:200px到两个的div（因为你正在做的），然后通过应用回复此width:auto来#inner。

/* Fixed width applied to both divs... */
div {
  background: rgba(0, 0, 0, 0.2);
  height: 400px;
  width: 200px;
  overflow-y: auto
}

/* ...and the width is reverted to default on #inner */
#outer { height: 400px; }
#inner { height: 200px; width: auto; }

请参阅此小提琴中的第二个片段

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。