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

Posted 2023-03-06

【中文标题】Div 并排大小可变，但始终填充 100% [重复]

【英文标题】：Div side by side with variable size, but always filling 100% [duplicate]

【发布时间】：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、... - 几乎所有东西。我错过了什么？

【参考方案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>