自动适合包含div

Question

我正在尝试根据将要进入的内容设置自动调整大小的div。代码是一种hackey，但我想知道是否有人可以提供一些关于让它正常工作的建议。

CSS：

.container { min-width:748px; margin-left:180px; margin-right:3px; border: 1px solid #210B61; border-top:none; }
.first_div { width:233px; background:#A9BCF5; border: 1px solid #210B61; float:left; overflow:auto; }
.second_div { background:#E0ECF8; overflow:hidden; }
.label_for_first_div { width:100px; text-align:left margin-left:5px; }

HTML：

<div class="container">
    <div class="first_div">
        <div class="label_for_first_div">

        </div>
    </div>
    <div class="second_div">

    </div>
</div>

问题在于，如果不使用label_for_first_div，first_div将不会显示在容器内。让第一个div适合容器的高度也令人不安。会使用display：table;是我最好的选择吗？

Answer 1

您可以使用calc()来完成此操作

.container { 
   min-width:748px; 
   margin-right:3px; 
   border: 1px solid #210B61; 
   border-top:none; 
   overflow: hidden;
}

.first_div { 
   width:233px; 
   background:#A9BCF5; 
   float:left; 
}

.second_div {
   width: calc(100% - 233px);
   background:red; 
   float: left;
}

EXAMPLE 1

或

您可以将div设置为display: table-cell，将父级设置为display: table

.container { 
    display: table;
    min-width:748px; 
    margin-right:3px; 
    border: 1px solid #210B61; 
    border-top:none; 
}
.first_div { 
    display: table-cell;
    width:233px; 
    background:#A9BCF5; 
}

.second_div {
    display: table-cell;
    background:red; 
}

EXAMPLE 2