2 side by side divs. One fits to content, other expands full width

I would like to lay out two divs horizontally

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

How can I achieve this?

1 answer

  • answered 2017-06-17 19:46 Michael Coker

    Using flex and flex-grow

    div {
    display: flex;
    width: 500px;
    }
    .grow {
    flex-grow: 1;
    background: #eee;
    }
    <div>
      <span>content</span>
      <span class="grow">grow</span>
    </div>