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>