CSS难题：在流体宽度div中制作一个100％宽度的select2框？

Question

我正在使用真棒Select2 jQuery plugi n。

目前我有一个固定宽度的div浮动到一个流体宽度div的左边，这很好用：

<div class="row">
<div class="col left">Label</div>
<div class="col right"></div>
</div>
.row {
    display: table;
}
.col {
    display: table-cell;
}
.col.left {
    width: 150px
}

但是当我在流体右侧div中添加一个select2框时，它不能很好地工作。现在很明显，流体右div实际上不是100％宽度，它适应其内容的宽度，因此select2box也会不断改变大小：

<div class="row">
<div class="col left">Label</div>
<div class="col right"><select style="width: 100%" class="select2">

    

这是一个证明问题的JSFiddle：http://jsfiddle.net/vfa4831b/4/

如何使.right流体宽度div适应可用宽度，并保持该大小？

将width: 100%;添加到.col.right会使div达到100％宽度，但也会溢出.row的边界。

更新：不幸的是，我需要IE8支持，所以不能只使用calc。

Answer 1

试试这个：

.row {
    display: table;
    width: 100%;
    background: #ccc;
}

使用display: table的行实际上并未设置为100％。