CSS：使用最小宽度时，浮动 DIV 内容溢出到容器之外。而是有滚动条
希望你们中的一个人能知道这个问题的答案。
我有 2 个浮动 DIVS 和 1 个具有最小宽度的 DIV 容器内容。当我调整窗口大小并且窗口小于最小宽度内容时，内容会溢出父容器。
我希望父容器能够扩展以容纳，而不是让内部的最小内容溢出并简单地在浏览器底部获得水平滚动条。
有人知道解决办法吗？
<html>
<style>
.outer {
width:100%;
border:2px solid green;
position:relative;
}
.left {
float:left;
width:20%;
max-width:250px;
background:red;
}
.right {
float:left;
width:80%;
background:#eee;
}
.inner {
min-width:620px;
border:1px solid blue;
}
.clear {
clear:both;
}
</style>
<div class='outer'>
<div class='left'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
<div
class='right'>
<div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
<div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
</div>
<div style='clear:both'></div>
</div>
希望滚动条在浏览器窗口（而不是 DIV）展开时水平显示。
hoping one of your guys would know the answer to this.
I have 2 floating DIVS and one DIV containers content that has min-width. When I resize window and window is smaller than min-width content, the content spills out of the parent container.
I would like parent container to expand to accomodate rather than have inside min-content to spill out and simply get horizontal scrollers at bottom of browser.
Anyone know solution?
<html>
<style>
.outer {
width:100%;
border:2px solid green;
position:relative;
}
.left {
float:left;
width:20%;
max-width:250px;
background:red;
}
.right {
float:left;
width:80%;
background:#eee;
}
.inner {
min-width:620px;
border:1px solid blue;
}
.clear {
clear:both;
}
</style>
<div class='outer'>
<div class='left'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
<div
class='right'>
<div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
<div class='inner' class='clear'>This is an inner content page. This is an inner content page.This is an
inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.This is
an inner content page.This is an inner content page.This is an inner content
page.This is an inner content page.This is an inner content page.</div>
</div>
<div style='clear:both'></div>
</div>
Would like scrollers to appear horizontally on browser window (and not DIV) as it expands.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您将最顶层父级的宽度设置为 100%。它不会变得比它的父级更大，在本例中是
body。如果您想让.outer元素更大，您可以指定固定宽度，http:// jsfiddle.net/ETcf2/。这样，
min-width就被删除了，浮动元素的行为就如预期的那样了。You are setting the width on the top most parent to 100%. It will not grow larger than it's parent, which is the
bodyin this case. If you want to make the.outerelement larger you can specify a fixed width, http://jsfiddle.net/ETcf2/.With that and the
min-widthremoved the floated elements behave as expected.尝试
Try