Css 最小宽度和位置固定不工作

我有两列，左边一列有动态宽度，右边一列有谷歌地图，位置：fixed

左列具有“最小宽度”值，调整窗口大小时，该值不起作用

下面是一个JSFIDLE：

HTML：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<section id="panel_contenedor">
</section>
<section id="mapa_contenedor">
<div id="map-canvas"></div>
</section>

#panel_contenedor {
width: 50%;
min-width:300px;
}
#mapa_contenedor {
width:50%;
height:100%;
position:fixed;
top:0;
right:0;
}
#map-canvas {
height:100%;
width:100%;
}

---

我添加了一个

最小宽度：50%到
#左侧
部分，并更改
最小宽度：200px至<代码>最小宽度：50%到
#右侧
。看起来，在所有情况下，两个部分都会相应地调整，蓝色部分不再隐藏红色

编辑：

<div id="main">
    <section id="panel_contenedor">
        todo texto bien elaborado ha de presentar siete características:<br><br><br><br>Ha de ser coherente, <br><br><br><br>es decir, centrarse en un solo tema, de forma que las diversas ideas<br><br><br><br> vertidas en él han de contribuir a la creación de una idea global.
    </section>
    <section id="mapa_contenedor">
        <iframe width="600" height="300" marginheight="0" 
        src="http://maps.google.com/maps?ie=UTF8&amp;q=loc:{address} {number}@{latitude},{longitude}&amp;z=14&amp;output=embed&amp;iwloc=near" 
        frameborder="0" marginwidth="0" scrolling="no">
        </iframe>
    </section>
</div>

position:fixed
相对于DOM的html元素。这就是为什么即使最小宽度设置为300px，您也会看到地图的原因

为了解决这个问题，我尝试了以下方法：

我用Iframe替换了google地图（您可以随时按照自己的意愿进行设置）

HTML:

<div id="main">
    <section id="panel_contenedor">
        todo texto bien elaborado ha de presentar siete características:<br><br><br><br>Ha de ser coherente, <br><br><br><br>es decir, centrarse en un solo tema, de forma que las diversas ideas<br><br><br><br> vertidas en él han de contribuir a la creación de una idea global.
    </section>
    <section id="mapa_contenedor">
        <iframe width="600" height="300" marginheight="0" 
        src="http://maps.google.com/maps?ie=UTF8&amp;q=loc:{address} {number}@{latitude},{longitude}&amp;z=14&amp;output=embed&amp;iwloc=near" 
        frameborder="0" marginwidth="0" scrolling="no">
        </iframe>
    </section>
</div>

我已经在注释
/*overflow-x:hidden中添加了注释*/。当窗口缩小时，如果需要滚动条，它只会添加滚动条。
显示：内联块在同一行上显示两个部分。我们只需要在左侧部分添加一个
float:left
，在右侧部分添加一个
float:right
。我把它们放在一个
#main
容器中，以调整整个窗口的大小。
谢谢Freelex，但我编辑了这个问题以便更好地理解