html - 使右栏填充剩余空间

This question already has answers here:

Make div fill remaining *horizontal* space in flexbox
                                
                                    （2个答案）
                                
                        
                                5个月前关闭。
            
                    
我有一个简单的flexbox布局...

.container {
    display:flex;
    flex-direction:row;
    width:100%;
}

.left {
    background:red;
}

.left img {
    padding:20px;
}

.right {
    background:green;
}

<div class="container">

<div class="left">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="right">
Right content
</div>

</div>

如何使右列填充剩余空间？

最佳答案

您可以将flex: 1;添加到.right

.container {
    display:flex;
    flex-direction:row
    width:100%;
}

.left {
    background:red;
}

.left img {
    padding:20px;
}

.right {
  background:green;
  flex: 1;
}

<div class="container">

<div class="left">
    <img src="https://dummyimage.com/300x200/000/fff">
</div>

<div class="right">
Right content
</div>

</div>

关于html - 使右栏填充剩余空间，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57259323/