css - 長さに関係なく3つのdivを並べてフロートする方法は?

Question

だから私は3つのdivを並べてフロートしたい。現在、私はそれらをdisplay: inline-block;左に浮かせて持っていますが、ウィンドウが小さすぎると、右端<div>は他の2つより下に強制されます.

また、右端と左端<div>が特定の最大幅を持つようにする必要があり、中央<div>はウィンドウを埋めるために幅を変更する必要があります。（解決策がこれを妨げる場合に備えて、この情報を提供しています）。どうすれば欲しいものを達成できますか?

編集

このためのコンテナー<div>(本体であろうと別のものであろうと<div>) は、幅 100% でな​​ければなりません。次のように配置された 3 つの横並び<div>の sが必要です。

ウィンドウを小さくまたは大きくしても、これはフォームを維持する必要があります。これは私が今持っているHTML / CSSです：

<div class="app-view">
  <div class="search-form"/>
  <div class="results-view"/>
  <div class="quick-viz"/>
</div>

.app-view-wrapper {
  display: inline-block;
  height: 100%;
}

.search-form {
  border-right: solid 1px #d1d2d4;
  display: inline-block;
  float: left;
  height: 100%;
  max-width: 300px;
  min-height: 900px;
  position: relative;
  width: 30%;
  background: #78787b;
}

.results-view {
  display: inline-block;
  height: 100%;
  padding-left: 10px;
  float: left;
  min-height: 900px;
  min-width: 200px;
  overflow-y: scroll;
  width: 55%;
}

.quick-viz {
  display: inline-block !important;
  position: relative;
  float: left;
  height: 100%;
  background: #78787b;
  overflow-x: scroll;
  margin-left: 10px;
}