How to Make a Div Fill a Remaining Horizontal Space

div {  display: flex;}
div input {  flex: 1;}

<div class="name-field">     <label for="name">Name:</label>     <input type="text" id="name" /></div>
<div class="email-field">     <label for="email">Email address:</label>     <input type="email" id="email" /></div>

Div fill remaining horizontal space

Demo

Just add

div.fill { float: none; overflow: hidden; }

Where float: none removes the floating (you can also avoid applying float: left to .fill), and overflow: hidden (or anything different than visible) prevent floating elements from overlapping .fill.

Other ways:

• You could use display: table-cell and display: table, but you couldn't specify which element should grow to fill all remaining space.

• But if you want full control and want to distribute remaining spaces in a more complex way, you should use Flexboxes.

make div fill up remaining space

What about something like this? https://jsfiddle.net/Siculus/9vs5nzy2/

CSS:

#container{
    width: 100%;
    float:left;
    overflow:hidden; /* instead of clearfix div */
}
#right{
    float:right;
    width:50px;
    background:yellow;
}
#left{
    float:left;
    width:50px;
    background:red;
}
#remaining{
    overflow: hidden;
    background:#DEDEDE;
}

Body:

<div id="container">
    <div id="right">div3</div>

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

    <div id="remaining">div2, remaining</div>
</div>

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?

How to make a div fill remaining space?

Here is a solution which defines header, footer and #contentParent as position: fixed and gives #contentParent 100% height minus the height of header and footer (= 80px in this example - this depends on your own settings).

Any additional content has to be added inside #contentParent - this element will then scroll since it has overflow-y:auto;. The header and footer will always remain on the screen due to their absolute position and won't cover any part of the content since #contentParent has according margins at top and bottom which equal the height of the header and footer.

The background image will cover #contentParent completely and won't scroll diue to background-attachment: fixed (integrated in the shortcut background property)

html,body,#main {  height: 100%;  margin: 0px;}
.floatClear {  clear: both;}
.headerGraphics {  display: inline;}
#header {  position: fixed;  top: 0;  width: 100%;  height: 40px;  background: #023489;  text-align: center;}
#logoCompany {  display: inline;}
#contentParent {  position: fixed;  height: calc(100% - 80px);  width: 100%;  overflow-Y: auto;  margin: 40px 0;  background: url(http://placehold.it/1500x800/fc7) center center no-repeat;  background-position: fixed;  background-size: cover;}
#leftPane {  background: yellow;  float: left;  margin: 100px 0 0 10%;  opacity: .5;  width: 40%;}
#rightPane {  background: green;  float: right;  margin: 100px 10% 0 0;  opacity: .5;  width: 40%;}
#footer {  position: fixed;  bottom: 0;  width: 100%;  height: 40px;  width: 100%;  background: lightblue;}

<body>  <div id='main'>    <div id='header'>      <div id='logoCompany'>        <img class='headerGraphics' src='Graphics\logo smaller.jpg'><img class='headerGraphics' src='Graphics\Marvelous Header3 small.png'>      </div>    </div>    <div id='contentParent' class='floatClear'>      <div id='content' style="text-align: center;">        <div id='leftPane'>          Left Col        </div>        <div id='rightPane'>          Right Col        </div>      </div>    </div>    <div id='footer'>      Footer    </div>  </div></body>

.header {  display: flex; /* justify-content: space-between; */  /* this is optional, because input{flex:1} is doing its job */  align-items:center;  /*demo*/  border:1px solid red;  height:60px;}
input {  flex: 1;  /*demo*/  margin: 0 10px;}

<div class="header">  <div id="logo">Logo here</div>  <input type="text" />  <div class="button">Button title</div></div>

html, body{ height:100%;    margin: 0;}.wrapper {  display: flex;  flex-flow: column;  height: 100%;}.topbar {  flex: 0 1 auto;  height: 50px;}.container-fluid {  flex: 1 1 auto;}

<div class="wrapper">  <div class="topbar" style="border: 2px solid red;"></div>
  <div class="container-fluid" style="border: 2px solid black;">    <div class="row-fluid" style="border: 2px solid green;">      <div class="col-lg-12"></div>    </div>  </div> </div>

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>