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 {

    background: peachpuff;

    padding: 10px;

}

div.right{

    flex: 1;

    background-color: yellowgreen;

    padding: 10px;

}

.container{

    background:black; 

    display: flex;

    width:450px;

}

<div class="container">

    <div class="left">

        Variable content here

    </div>

    <div class="right">

        remaining space

    </div>

</div>