Div 并排且大小可变，但始终填充 100%

Question

我有两个divs我想并排放在一个容器中。我遇到的问题是，左侧div的大小取决于内容，而右侧div应该使用所有可用空间。

<style>

div.left {

    display: inline-block;

    outline-width: 0;

    background-color: yellow;

    padding-right: 5px;

}

div.right{

    display: inline-block;

    max-width: 100%;

    outline-width: 0;

    background-color: green;

}

.container{

    background:black;    

    width:450px;

}

</style>

<div class="container">

    <div class="left">

        LEFT

    </div>

    <div class="right">

        RIGHT

    </div>

</div>

我尝试过flex,, table-cell-...几乎所有的东西。我缺少什么？

Answer 1

display: flexflex:1如果您也分配给div，则会完成这项工作.right，因此它将占用所有剩余空间：div.left {&nbsp; &nbsp; background: peachpuff;&nbsp; &nbsp; padding: 10px;}div.right{&nbsp; &nbsp; flex: 1;&nbsp; &nbsp; background-color: yellowgreen;&nbsp; &nbsp; padding: 10px;}.container{&nbsp; &nbsp; background:black;&nbsp;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; width:450px;}<div class="container">&nbsp; &nbsp; <div class="left">&nbsp; &nbsp; &nbsp; &nbsp; Variable content here&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="right">&nbsp; &nbsp; &nbsp; &nbsp; remaining space&nbsp; &nbsp; </div></div>