javascript - 调整中间容器的大小

Question

关于如何在调整窗口大小时调整中间红色容器的大小，给定左右两个宽度固定的黑色容器？我知道我可以在 jQuery 中计算窗口宽度并应用到中间 <div>但我想知道是否还有其他无 js 的解决方案。 Plnkr link here

<div id="wrapper">
  <div class="pull-left black"></div>
  <div class="middle red"></div>
  <div class="pull-right black"></div>
</div>

Answer 1

flex 盒子？

JSFiddle Demo

#wrapper {
  max-width: 300px;
  height: 40px;
  display: flex;
}
.black {
  flex: 0 0 40px;
  background: #000;
}
.red {
  flex: 1;
  background: #f00;
}

<div id="wrapper">
  <div class="black"></div>
  <div class="red"></div>
  <div class="black"></div>
</div>