col-12-css 列中的固定和流体 div 不折叠

Question

我试图在 col-12-xs 的一行中放置两个固定宽度的 div 和一个流体宽度的 div。我希望这个流体 div 填充整个剩余空间，但具有最小宽度（例如 600 像素）。

我做了这样的事情：

<div class="container">
  <div class="row">
    <div class="col-12-xs">
      <div class="event">
        <div class="date">
        </div>
        <div class="flyer">
        </div>
        <div class="info">
        </div>
      </div>
    </div>
  </div>
</div>

.date, .flyer, .info {
  float: left;
  border: 1px solid black;
  height:100px;
}

.date, .flyer {
  width: 100px;
}

.info {
  min-width: 600px;
}

它工作正常，但是当我减小窗口大小时，这个 .info div 移动到下一行，这不是我想要的。

我该如何解决这个问题？

http://www.bootply.com/stF3byJ56I#

Answer 1

为.info删除float:left

.date, .flyer, .info {
  border: 1px solid black;
  height:100px;
}
.date, .flyer {
  width: 100px;
  float:left;
}
.info {
  min-width:600px; 
}