Div growing outside of width constraint despite overflow:auto
I'm attempting to have a horizontally-scrolling (left-to-right) DIV in a dynamic width table cell (DIVs with display:table-cell). The scrolling DIV should be allowed to take up 100% of the containing element without causing it to grow beyond all ancestors' widths. I'd prefer to have a pure markup/CSS fix to this problem, without JavaScript or static widths.
<!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/
The issue is visible in IE8, Chrome, Firefox, and Safari.
In this example, the yellow div is being forced to grow beyond it's container (we expect the entire page to be no larger than 500px. See the max-width style for #page ) because the red DIV isn't respecting overflow:auto and therefore trying to expand to show the green DIV completely.
Expected behavior: I'd like for the teal and yellow cells to add up to 100% of their parent ( #page ). The green cell is so wide that it's making the red cell expand, which is making the yellow cell expand. It's expected that the red cell use a horizontal (left-to-right) scrollbar instead of making the yellow cell expand.
display:table;
table-layout:fixed;
to #page.
There it is:
http://jsfiddle.net/L69qJ/8/
To answer your question, the problem is that you are using table-cells. Table cells inherently take the shape of their children, so if you set something wide inside of a table cell, you can't just add a width to the table cell and expect it to follow that rule. You need to transition to using percentage width inline divs, or floats to achieve your layout.
链接地址: http://www.djcxy.com/p/88416.html上一篇: 滚动条不隐藏