Make div in the middle fill remaining space

Question

I have this HTML structure (Simplified). I want to make it so that the logo, input and button are:

1) Vertically aligned in the header

2) The logo and button has a fixed size. I want the input in the middle of those two items to be the remaining width between them.

(Logo to the left, button to the right. Input then the width of the in between bit)

Then when the window is resized, the input text auto resizes.

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

Having you explored `flex-box` solutions? If you are not worried about compatibility for legacy browsers this will be the most efficient approach, let the browser do all the calculations. **flex - CSS | MDN:** https://developer.mozilla.org/en-US/docs/Web/CSS/flex — UncaughtTypeError, Oct 20 '17 at 20:43

dippas · Accepted Answer · 2017-10-20T21:53:39.003

using flexbox you can do that,

apply display: flex; to the parent (.header) so the whole container is now a flex element
use align-items:center in parent (.header) to vertically align them, see more about align-items
apply flex:1(shorthanded for flex-grow:1 flex-shrink:1 flex-basis:0) to input to grow the remaining space left

.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>

Make div in the middle fill remaining space

1 Answers1