CSS 填充剩余容器宽度

我有这个标题栏。我需要名为“middle”的元素来填充 div 中剩余的空白。我该怎么做？

header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
}

<header>
  <img src="https://picsum.photos/100"/>
  <div id="middle">222</div>
  <div id="right">333</div>
</header>

Use calc!

https://jsbin.com/wehixalome/edit?html,css,输出

HTML:

<div class="left">
  100 px wide!
  </div><!-- Notice there isn't a space between the divs! *see edit for alternative* --><div class="right">
    Fills width!
  </div>

CSS:

.left {
  display: inline-block;
  width: 100px;

  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);

  background: blue;
  color: white;
}

更新：作为 div 之间没有空格的替代方案，您可以设置font-size: 0在外部元件上。