Div 并排大小可变，但始终填充 100% [重复]答案

【问题标题】：Div side by side with variable size, but always filling 100% [duplicate]Div 并排大小可变，但始终填充 100% [重复]
【发布时间】：2020-07-19 15:03:56
【问题描述】：

我有两个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、... - 几乎所有东西。我错过了什么？

【问题讨论】：

标签： html css

【解决方案1】：

如果您还将flex:1 分配给.right div，display: flex 将完成这项工作，因此它将占用所有剩余空间：

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>

【讨论】：