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

Question

下面的代码显示了两个嵌套的div，每个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>

Answer 1

是的，它很有可能。

您需要将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; }

在this fiddle

中查看其工作原理

或者您可以将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; }

请参阅this fiddle

中的第二个代码段

Answer 2

只需将#inner设为width:auto。

这种方式（因为它是一个块元素）它将占用尽可能多的但滚动条将出现在需要时它所需的位置。

div {
  background: rgba(0, 0, 0, 0.2);
  width: 200px;
  height: 400px;
  overflow-y: auto
}
#outer { height: 400px; }
#inner { height: 200px; width:auto;}
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>