CSS: Inline Element Stretch to Fill Available Horizontal Space of Container

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>

How to horizontally stretch elements when using flex-box

Just add flex:1 to flex items:

.flex-container {  display: flex;  height: 200px;  align-items: stretch;  background-color: DodgerBlue;}
.flex-container > div {  background-color: #f1f1f1;  margin: 10px;  text-align: center;  line-height: 75px;  font-size: 30px;  flex: 1;}

<h1>The align-items Property</h1>
<p>The "align-items: stretch;" stretches the flex items to fill the container (this is default):</p>
<div class="flex-container">  <div>1</div>  <div>2</div>  <div>3</div>  </div>

How to make middle element stretch horizontally over all available space

You can use floating:

HTML:

<div class="outer">
    <label>Label</label>
    <button>Search!</button>
    <div><input/></div>
</div>

CSS:

.outer{
  border: solid thin;
  overflow: hidden; /* Clear float */
}
.outer > label {
  float: left; /* Push left */
}
.outer > button {
  float: right; /* Push right */
}
.outer > div {
  overflow: hidden; /* Make it take remaining space */
}
.outer > div > input {
  width: 100%;  /* Make it fill its parent */
  box-sizing: border-box; /* Avoid extra width because of borders */
}

Demo

Make inline-blocks stretch container horizontally

Add

white-space: nowrap

to the container

So container style becomes:

.container{
  overflow-x: scroll;
  white-space: nowrap;
}

white-space: nowrap means Sequences of whitespace will collapse into a single whitespace. Text
will never wrap to the next line. The text continues on the same line until a < br > tag is encountered

See the link : "http://codepen.io/anon/pen/xGQXRz"

How do I stretch two div-elements to fill available horizontal space?

One way to solve this is to treat your divs like the cells of a table. A unique property of tables is that the cells will fill the width of the table no matter what widths you give them. By giving some cells a width the other cells will fill the remaining space. By using display:table and display:table-cell you can take advantage of this without changing your html. Have a look at this example:

http://jsfiddle.net/GyxWm/

I've not tested this but it should work in all "current" browsers. It should work in IE8+ but probably doesn't work in IE7 and certainly won't work in IE6.

Fill the remaining height or width in a flex container

Use the flex-grow property to make a flex item consume free space on the main axis.

This property will expand the item as much as possible, adjusting the length to dynamic environments, such as screen re-sizing or the addition / removal of other items.

A common example is flex-grow: 1 or, using the shorthand property, flex: 1.

Hence, instead of width: 96% on your div, use flex: 1.

You wrote:

So at the moment, it's set to 96% which looks OK until you really squash the screen - then the right hand div gets a bit starved of the space it needs.

The squashing of the fixed-width div is related to another flex property: flex-shrink

By default, flex items are set to flex-shrink: 1 which enables them to shrink in order to prevent overflow of the container.

To disable this feature use flex-shrink: 0.

For more details see The flex-shrink factor section in the answer here:

What are the differences between flex-basis and width?

Learn more about flex alignment along the main axis here:

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Learn more about flex alignment along the cross axis here:

How does flex-wrap work with align-self, align-items and align-content?

Allow inline block elements to stretch fluidly and collapse and stack as viewports shrink

Many thanks to Chris Coyier and CSS Tricks. Flexbox is indeed the answer. Rather than copy and paste his solution, here's the link to his Pen: http://codepen.io/chriscoyier/pen/yCeax. If you are interested in his whole thought about it, here is the blog post to it: http://css-tricks.com/filling-space-last-row-flexbox/

Here's the actual solution, just in case the CodePen goes away.

HTML

<button id="add">Add Child</button>

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS

* {
  box-sizing: border-box;  
}

#parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  height: 50px;
  background: red;
  flex: 1;
  min-width: 25%;
  border: 5px solid white;
}

@media (max-width: 700px) {
  .child {
    min-width: 33.33%; 
  }
}

@media (max-width: 400px) {
  .child {
    min-width: 50%; 
  }
}

jQuery

$("#add").on("click", function() {
  $("#parent").append("<div class='child' />");
});