响应宽度（浮动左）div根据到相邻（浮右）div的距离

Question

我正在尝试在（浮动左侧）div上使用文本省略号，该div被“夹在”（float left）div和（float right）div之间。

[float left] [向左浮动（需要省略宽度）] [向右浮动]

我的问题是要使用文本省略号，我需要指定'夹心'div的宽度或最大宽度。但我不知道如何做到这一点，因为该宽度取决于相邻（浮右）div的距离，这取决于浏览器窗口宽度。

请检查下面的代码。如果缩小浏览器窗口的宽度，您将看到信息图标在与我需要忽略的文本发生碰撞时跳转到下一行。

简单来说，我希望L / R箭头和信息图标分别保持最左边和右边，无论窗口宽度如何，中间的文字都会根据窗口宽度消失。

我搜索过，我发现我可以用calc做到这一点，但我正在寻找一个不那么实验性的解决方案。

非常感谢。

http://codepen.io/anon/pen/vLMBMJ

这是HTML代码

<div id="footer">
  <div id="subie">

    <div id="control">
        <button id="prv" class="button">←</button>
        <button id="pos" class="button">→</button>
      </div>

      <div id="title">
        <span id="page">Gloria Anzaldúa- Borderlands, La Frontera, The New Mestiza</span>
      </div>

      <div id="info">
        <button id="" class="button"><img src="http://findicons.com/files/icons/2232/wireframe_mono/32/info.png" width="33px"></button>
      </div>

    </div>
</div>

和CSS

#footer {
  position: fixed;
  margin: 0px;
  padding: 0px;
  bottom: 0px;
  height: 5.5vh;
  width: 100vw;
  background-color: #ffffff;
  z-index: 100;
}

#subie {
  position: absolute;
  left: 51vw;
  width: 42vw;
  height: 5.5vh;
  margin: 0px;
  padding: 0vh 1vw 0vh 1vw;
}

#control {
  float: left;
  text-align: left;
  display: flex;
  align-items: center;
  height: 5.5vh;
}

#title {
  float: left;
  text-align: left;
  display: flex;
  align-items: center;
  height: 5.5vh;
  width: ;
}

#info {
  float: right;
  display: flex;
  align-items: center;
  height: 5.5vh;
}

.button {
  background-color: transparent;
  border: none;
  margin: none;
  padding: none;
  color: black;
  text-align: left;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  outline: 0;
  font-size: 1em;
}