Question

我正在尝试在动态宽度表单元格中使用水平滚动（从左到右）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>的 max-width 样式）因为红色DIV不尊重 overflow：auto ，因此尝试展开以完全显示绿色DIV。

预期行为：我希望青色和黄色单元格加上100％的父级（ #page ）。绿色细胞非常宽，使得红细胞膨胀，使黄细胞膨胀。预计红色单元格使用水平（从左到右）滚动条而不是使黄色单元格扩展。

Answer 1

display:table;
table-layout:fixed;

到#page。

它是：

http://jsfiddle.net/L69qJ/8/

Answer 2

要回答您的问题，问题是您正在使用表格单元格。表格单元格本身就是他们孩子的形状，所以如果你在表格单元格中设置一些宽的东西，你就不能只为表格单元格添加一个宽度，并期望它遵循该规则。您需要转换为使用百分比宽度内联div或浮点数来实现布局。

除了溢出之外，Div在宽度约束之外增长：auto

2 个答案: