web-dev-qa-db-ja.com

CSS3 Flexboxフルハイトアプリとオーバーフロー

以下のようなレイアウトのような古典的なメールを使用するアプリがあります。

私は新しいCSS3 flexboxモデルを使用してそれを構築しました。ユーザーがフォルダーボックスに動的に新しいアイテムを追加する機能を追加するまで、それは見事に機能します。flexboxは、フォルダボックスにスペースが残っている限り、その下のタスクボックスに拡大し始めないように機能しました。残念ながら、これは（Chrome 17）。

問題を示すJSFiddle here を作成しました。 Add Folderリンクをクリックするだけで、新しい子を収容するのに十分なスペースがあっても、フォルダーボックスが大きくなります。

質問に。 flexboxを使用して、使用可能な高さの3分の2を占めるように2つの垂直方向に整列したボックスを構築するにはどうすればよいですか（box-flex 2）と残りの3分の1（box-flex 1）であり、新しいコンテンツが最初のボックスに追加すると、スペースがなくなるまで成長しません。

cssflexbox
25
Lars Tackmann

それがブラウザーのバグなのか、それとも実際にフレックスモデルがどのように機能するはずなのかは、はっきりとは言えません。それがどのように機能するかは、直感的ではないことに同意します。

オーバーフローを自動に設定して、絶対位置のdivでリストをラップすることで回避策を見つけました。これにより、フレックスボックスは元の状態を維持し、レイアウト全体が再計算されてコンテンツが変更された場合にのみ変更されます。

更新されたマークアップは次のとおりです。

<section id="folders">
   <div class="dynamicList">
   <h2>Folders</h2> 
   <ul>
      <li>Folder 1</li>
      <li>Folder 2</li>
   </ul> 
   <a href="#" id="add">Add Folder</a>
   </div>      
</section>

そして更新されたCSS：

#left #tasks,
#left #folders {
  position: relative;
}

.dynamicList {
  bottom: 0;
  left: 0;
  overflow: auto;
  position: absolute;
  right: 0;
  top: 0;
}

私はここであなたのフィドルをフォークしてデモしました： http://jsfiddle.net/MUWhy/4/

UPDATE：

見出しを固定したまま、フォルダーとタスクリストの内容のみをスクロールさせる場合は、＃left div内の独自の高さ固定ボックスに見出しと追加ボタンを配置することを検討します。それはもう少しマークアップですが、それでもかなりシンプルです。私はJSFiddleで試したことはありませんが、それが最善の方法だと思います。

16
Jim Jeffers

私は多かれ少なかれ同じである私の他の質問からこの答えを得ました： https://stackoverflow.com/a/14964944/1604261

@LukeGTソリューションの代わりに、これは回避策であり、効果を得るためのソリューションではないため、垂直スクロールを表示する要素に高さを適用できます。

したがって、垂直スクロールでmin-heightが必要な場合が最善の解決策です。

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 100px;
}

必要な場合完全な縦スクロール記事を表示するのに十分なスペースがない場合：

#container article {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0px; /* or height:0px */
}

高さを設定しない場合（heightまたはmin-heightを使用）、垂直スクロールは設定されません。すべてのケースで、height：0px;を使用しても、要素の計算された高さはゼロとは異なります。

-webkit接頭辞を使用した私のソリューション： http://jsfiddle.net/ch7n6/4/

編集：

Firefoxは完全なflexbox仕様をサポートするようになったため、-webkit-ベンダープレフィックスを削除すると、すべてのブラウザーで機能します。

13
José Cabo

ハックではないため、私はジムよりもこのソリューションを好みます。これは、ページのどの部分でもflexboxで機能します。ジムは、ページの左上にあるボックスでのみ機能します。

これを解決するには、フレックスボックスのスクロールしたい部分をdiv.scrollboxでラップします。このdivの直接の子の高さを0にしたので、その中に要素を追加しても、残りのレイアウトには影響しません。また、そのoverflow-yをautoに設定して、子がその境界を超えて拡張された場合にスクロールバーが表示されるようにしました。

.scrollbox {
    -webkit-flex: 1 1 auto;
    overflow-y: auto;
}
.scrollbox > * {
    height: 0;
}

これは、拡張可能なコンテンツが包含要素または包含要素内に配置されている場合にのみ機能することに注意してください。この例では、li要素は包含ul要素内に含まれているため、機能します。

左上の3つのコンポーネントを取得するためにいくつか変更を加える必要もありましたflexboxそれ自体を適切に配置するために、これはアプリケーション固有のものでした。

#folders {
    display: -webkit-flex;
    -webkit-flex-flow: column;
}
#folders h2, #folders #add {
    -webkit-flex: 0 1 auto;
}

上記のjsfiddleをここで分岐しました： http://jsfiddle.net/FfZFG/ 。

4
LukeGT