html - 2个并排的div。一种适合内容，另一种适合全宽

This question already has answers here:

Make div fill remaining *horizontal* space in flexbox
                                
                                    （2个答案）
                                
                        
                                2年前关闭。
            
                    
我想水平布局两个div

parent div width=500px
- left div: shall grow horizontally to fit to contents (not more or less)
- right div: shall grow horizontally and take up all the space to the right edge

我该如何实现？

最佳答案

使用flex和flex-grow

div {
display: flex;
width: 500px;
}
.grow {
flex-grow: 1;
background: #eee;
}

<div>
  <span>content</span>
  <span class="grow">grow</span>
</div>

关于html - 2个并排的div。一种适合内容，另一种适合全宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44608776/