具有最小宽度的 Css 默认宽度，但会增长以适应内容

Question

我有一个容器，我希望它的 min-width 为 250px，默认宽度为 500px。但是，如果其中的内容变得大于 500px，我希望它增长以适应该内容。

我该怎么做？

举个例子 http://jsfiddle.net/e0uo7w8n/

.e
{
    font-size:20px;
}
.viewport1, .viewport2
{
    border-width:1px;
    border-color:#000000;
    border-style:solid;
    padding:20px;
}
.viewport1
{
    width:300px;
}
.viewport2
{
    width:800px;
}
.root
{
    background-color:#FFCCCC;
    min-width:400px;
    max-width:600px;
    padding:20px;
}
.colFixed
{
    background-color:#CCFFFF;
    width:200px;
    float:right;
    height:150px;
    padding:20px;
}
.colFluid
{
    background-color:#FFCCFF;
    overflow:hidden;
    padding:20px;
}

<div class="viewport1">
    <p class="e">Viewport 1: Demonstrates min-width</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/20x150">
    </div>
</div>
</div>
    
<div class="viewport2">
    <p class="e">Viewport 2: Demonstrates default width</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/200x150">
    </div>
</div>
    </div>
    
<div class="viewport2">
    <p class="e">Viewport 2: But it should resize to the picture</p>
<div class="root">
    <div class="colFixed"></div>
    <div class="colFluid">
        <img src="http://placehold.it/400x150">
    </div>
</div>
    </div>

Answer 1

也许尝试删除 width:500px 以便 div 可以随内容增长并添加 max-width 以根据需要限制它并将您的 min-width 设置为500px 将其用作较小屏幕的媒体查询的默认宽度。如果您添加一些代码，我可以为您提供更多帮助。