尽管出现溢出，但Div在宽度约束之外生长：auto
我试图在动态宽度表单元格中使用水平滚动（从左到右）的DIV（带有display：table-cell的DIV）。 应该允许滚动DIV占用包含元素的100％，而不会超出所有祖先的宽度。 我宁愿有一个纯粹的标记/ CSS修复这个问题，没有JavaScript或静态宽度。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<style>
#page
{
width: 100%;
max-width: 500px;
}
.tcell
{
display: table-cell;
min-width: 150px;
padding: 10px;
}
#scrollbox
{
width: 100%;
height: 90px;
background-color: red;
overflow: auto;
}
#scrollcontent
{
background-color: green;
width: 900px;
height: 50px;
margin: 10px;
white-space: nowrap;
}
</style>
</head>
<body style="width:100%;">
<div id="page">
<div class="tcell" style="background-color: teal;">Hello world</div>
<div class="tcell" style="background-color: yellow;">
<div id="scrollbox">
<div id="scrollcontent"></div>
</div>
</div>
</div>
</body>
</html>
JSFiddle：http://jsfiddle.net/L69qJ/
该问题在IE8，Chrome，Firefox和Safari中可见。
在这个例子中，黄色div被强制超出它的容器（我们预计整个页面不会大于500px，请参阅#page的最大宽度样式），因为红色DIV不符合溢出：auto和因此试图完全展开以展示绿色的DIV。
预期行为：我希望蓝绿色和黄色细胞的总数达到他们父母的100％（ #page ）。 绿色的细胞太宽了，它使得红色的细胞膨胀，这使得黄色的细胞膨胀。 预计红色单元会使用水平（从左到右）滚动条而不是使黄色单元格展开。
display:table;
table-layout:fixed;
到#page。
那里是：
http://jsfiddle.net/L69qJ/8/
要回答你的问题，问题是你正在使用表格单元格。 表格单元格固有地呈现了他们的孩子的形状，所以如果你在表格单元格内设置宽阔的东西，你不能只在表格单元格中添加一个宽度，并期望它遵循该规则。 您需要转换为使用百分比宽度的内嵌div或浮动来实现您的布局。
链接地址: http://www.djcxy.com/p/88415.html上一篇: Div growing outside of width constraint despite overflow:auto