2並排divs。選擇一個適合內容，其他擴展全寬

Question

我想打好了兩個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 

我怎樣才能做到這一點？

Answer 1

使用flex和flex-grow

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

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