div 胖内容通过滚动拉伸到页面

Question

我的结构是这样的：

<html>
<body>
<div id="div1">
  <div id="div2">
  </div>
  <div id="div3">
  </div>
</div>
</body>
</html>

div3 的内容很宽，会使浏览器水平向右拉伸很远。

如何让 div3 只拉伸到它的父级，但当它太宽时，启用水平滚动？我不想固定长度，希望它使用所有浏览器的水平 space.

我做了 <div style="width:100%; overflow-x:scroll;"> 但还是没用。不知道哪里出了问题。我还确保 div 继承的每个级别都有 width:100%。最外层也有 max-width:100%.

提前致谢。

这里是我想做但做不好的例子：

Answer 1

我假设这就是你想要的？只是一个 div 会随浏览器扩展和收缩，但里面的内容是可滚动的？如果是这样.. 就是您要查找的 width:100% 和 overflow-x:scroll。

<div id="div1" style="border:1px solid #000; height:500px; width:100%">
  <div id="div2" style="border:1px solid #FF0000; margin-top:200px; width:100%; overflow-x:scroll;">
  this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content this is content 
  </div>

  <div id="div2" style="border:1px solid #FFFF00; margin-top:20px; width:100%; overflow-x:scroll;">
  thisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontentthisiscontent
  </div>
</div>

这是一个有效的 FIDDLE

div 胖内容通过滚动拉伸到页面

div fat content stretch to page with scroll

html

scroll

stretch

width