How can I create left & right side fixed width elements with a center that fills the remainder?

Question

With pure CSS I'd like to know how to create two fixed-width elements at the container's sides with a center element that fills the remaining space, like this:

The "play" and "fullscreen" icons are attached to the sides of the container at a fixed width, but the center element, the red bar that scales between the two buttons, should fill the remaining space. This seems difficult.

There's a related popular question on SO that demonstrates this, except only with one fixed width element on one side:

How to make a div to fill a remaining horizontal space (a very simple but annoying problem for CSS experts)

How can this be done?

Answer 1

You can use calc() like this :

* {
  margin: 0;
  padding: 0;
}
.wrap {
  width: 100%;
}
.one {
  width: 100px;
  background: red;
  float: left;
}
.two {
  width: calc(100% - 200px);
  background: green;
  float: left;
}

<div class="wrap">
  <div class="one">left section</div>
  <div class="two">mid section</div>
  <div class="one">right section</div>
</div>

Answer 2

Flexible box technique is apt for the problem.

1. Set the parent container to be the flexible box.
2. Target the left and right elements to have a fixed width using flex: 0 0 100px
3. Target the center element to have flexible width using flex: 1 1 auto

Learn more about the properties here: Guide to flexbox

Check the browser compatibility table: Flexbox

* {
  margin: 0;
  padding: 0;
}
.container {
  display: flex;
  flex-flow: row nowrap;
}
.left,
.right {
  background: lightblue;
  flex-shrink: 0;
  /* Don't shrink */
  flex-grow: 0;
  /* Don't grow */
  flex-basis: 100px;
  /* Set 100px as fixed width */
  /* flex: 1 1 auto; Short hand for above three properties */
  text-align: center;
}
.center {
  background: tomato;
  color: #fff;
  flex-shrink: 1;
  /* Shrink when resized */
  flex-grow: 1;
  /* Grow when resized */
  flex-basis: auto;
  /* Automatic width */
  /* flex: 1 1 auto; Short hand for above three properties  */
  text-align: center;
}

<div class="container">
  <div class="left">Left</div>
  <div class="center">Center</div>
  <div class="right">Right</div>
</div>