Css 固定元件的大小调整不正确'；孩子们_Css_Google Chrome

Css 固定元件的大小调整不正确'；孩子们

css google-chrome

Css 固定元件的大小调整不正确'；孩子们,css,google-chrome,Css,Google Chrome,我有一些嵌套的div在chrome26（stable）的窗口中无法正确调整大小，但在以前的版本和Firefox中都可以正常工作。在我提交一份bug报告之前，我想确认我看到的不是我的其他浏览器所期望的标准行为使用Chrome 26，尝试在上调整预览窗格的大小。#internal元素将缩小或扩展到其父元素的范围之外，这是我不希望它这样做的，在以前的Chrome版本或Firefox中也没有将我的#outerdiv设置为绝对定位可以解决问题，但我需要将#outerdiv固定到位。我还注意到，从#ma

我有一些嵌套的div在chrome26（stable）的窗口中无法正确调整大小，但在以前的版本和Firefox中都可以正常工作。在我提交一份bug报告之前，我想确认我看到的不是我的其他浏览器所期望的标准行为

使用Chrome 26，尝试在上调整预览窗格的大小。

#internal

元素将缩小或扩展到其父元素的范围之外，这是我不希望它这样做的，在以前的Chrome版本或Firefox中也没有

将我的

#outer

div设置为绝对定位可以解决问题，但我需要将

#outer

div固定到位。我还注意到，从

#main

中删除

位置：absolute

也可以解决问题……但我需要将

#main

绝对定位

我不知道为什么会发生这种情况，甚至不知道这是否是预期的行为。我需要

#内部

子元素与其

#外部

父元素一起调整大小，而不是独立地调整

#外部

元素的比例。我怎样才能做到这一点

HTML/CSS

<!doctype html>
<html>
<style>
#main {
    min-height: 100%;
    position: absolute;
    width: 100%;
}
#container {
    min-width: 400px;
    width: 50%;
    margin: auto;
    position: relative;
}
#outer {
   position: fixed;
   border: solid 2px black;
   margin-top: 100px;
   top: auto;
   max-height: 150px;
   position: fixed;
   width: 50%;
   min-width: 400px;
   margin: auto;
   background-color: green;
}

#inner {
    background-color: rgba(0,0,0,.5);
    padding: 10px;
    border: 2px gray dashed;
    position: relative;
}

</style>
<div id="main">
<div id="container">
    <div id="outer">
        <div id="inner">
            <input type="text">
        </div>
    </div>
</div>
</div>


#主要{
最小高度：100%；
位置：绝对位置；
宽度：100%；
}
#容器{
最小宽度：400px；
宽度：50%；
保证金：自动；
位置：相对位置；
}
#外{
位置：固定；
边框：纯色2px黑色；
边缘顶部：100px；
顶部：自动；
最大高度：150像素；
位置：固定；
宽度：50%；
最小宽度：400px；
保证金：自动；
背景颜色：绿色；
}
#内在的{
背景色：rgba（0,0,0,5）；
填充：10px；
边框：2个灰色虚线；
位置：相对位置；
}

如果如下图所示将主容器更改为

位置：fixed

，它将解决大小调整问题。不知道这会对页面布局产生什么影响，但外观类似

#main 
{
    position:fixed;
    top:0;bottom:0;left:0;right:0;
    background-color:#d3fcee;
}