html - 让div占满剩余宽度

Question

基本上我有 2 个 DIV。一个有固定的宽度。现在我想让另一个占据剩余的宽度。

我只能通过将 float 放在固定宽度的 div 上来实现这一点 - 对我来说是右边的那个。但它只有在我换掉 HTML 中的 DIV 时才有效(正确的先出现)。我不喜欢这样。

那么有什么方法可以得到这个确切的设置，而不必换掉我的 HTML 中的 DIV 吗？

这里有一个 JSFiddle 用于说明

https://jsfiddle.net/MHeqG/1862/

HTML(当我把左边的 DIV 放在第一个时， float 中断)

<div id="wrap">
    <div id="right">
        right
    </div>
    <div id="left">
        left
    </div>
</div>

CSS

#wrap {
    width: 300px;
}
#left {
    width: 100%;
    background-color:#ff0000;
}
#right {
    float: right;
    width: 50px;
    background-color:#00FF00;
}

Answer 1

您可以尝试使用 display:flex;，我认为它可以满足您的需求。

Fiddle