web-dev-qa-db-ja.com

flexbox高さが不明な場合に垂直にセンタリングする場合の問題

レイアウトにはコンテナがありますflex-containerと子。

HTML：

<div class="flex-container">
  <div>text</div>
</div>

コンテナと子には、不明な高さがあります。そして、目標は次のとおりです。

  • 子の高さがコンテナより低い場合、水平方向と垂直方向の中央に表示されます。
  • 子の高さがコンテナよりも大きい場合、子は上下に調整され、スクロールできます。

スキーム： enter image description here

flexboxで要素を中央に配置する最も速い方法は次のとおりです。

.flex-container
{
  display: flex;
  align-items: center; /* vertical */
  justify-content: center; /* horizontal */

  width: 100%;
  height: 300px; /* for example purposes */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen： http://www.codepen.io/ces/pen/slicw

ただし、コンテナの子の高さが大きい場合、子は正しく表示されません。子は切り取られて表示されます（上部のみ）。

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  align-items: center; // vertical
  justify-content: center; // horizontal
  
  width: 100%;
  height: 100px;
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  background: #E77E23;
  width: 400px;
}
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

Codepen： http://www.codepen.io/ces/pen/sGtfK

スキーム：

enter image description here

この問題を解決する方法はありますか？

csscss3flexboxheightoverflow
68
cespon

私は解決策を見つけました：

.flex-container
{
  display: flex; /* only */
  overflow-y: scroll;
}

.flex-container > div
{
  margin: auto; /* horizontal and vertical align */
}

html,body
{
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.flex-container
{
  display: flex;
  width: 100%;
  height: 100px; /* change height to 300px */
  overflow-y: scroll;
  background: #2a4;
}

.flex-container > div
{
  padding: 1em 1.5em;
  margin: auto;
  background: #E77E23;
  width: 400px;
}
<div class="flex-container">
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure fugit voluptas eius nemo similique aperiam quis ut! Ipsa aspernatur rem nesciunt est sed hic culpa nisi delectus error explicabo reprehenderit. </div>
</div>

コードペン： http://codepen.io/ces/pen/Idklh

137
cespon