css - Is it possible to fill the remaining width? -

i fill remaining width, example:

• the black rectangle container got relative width.
• the green rectangles display <div> or other element css in code block below.
• the red line shows end of right div of setup css below. can see don't want should fill remaining space.

so how fill remaining space if content smaller container?

---

.wrapper {    display:block;    text-align:center;  }  .container {    display:inline-block;    background-color:black;        width:100%;    max-width:600px;  }  .column {    color:white;    background-color:green;        float:left;    width:auto;    display:inline-block;  }

<div class="wrapper">    <div class="container">        <div class="column">          short text        </div>        <div class="column">          <span>long text</span>      </div>    </div>  </div>

there large number of approaches, 1 float firsst element , apply overflow:hidden on 'stretch' columns force occupy remainins space.

.column:first-of-type {    background: green;    float: left;  }    .column:last-of-type {    background: red;    overflow: hidden;  }

<div class="column">    short text  </div>  <div class="column">    long text  </div>

alternatively...you use css table:

.container {    display: table;    width: 100%;  }  .column {    display: table-cell;  }  .column:first-child {    background: green;    white-space: nowrap;    width: 1%;  }  .column:last-child {    background: red;  }

<div class="container">    <div class="column">      short text    </div>    <div class="column">      long text    </div>  </div>