コンテナがあふれているフレックスアイテムの一番上までスクロールできません

290
jejacks0n 2015-11-01 07:35.

そのため、flexboxを使用して便利なモーダルを作成しようとすると、ブラウザーの問題と思われるものが見つかり、既知の修正または回避策があるかどうか、またはそれを解決する方法についてのアイデアがあるかどうか疑問に思います。

私が解決しようとしていることには、2つの側面があります。まず、モーダルウィンドウを垂直方向の中央に配置します。これは期待どおりに機能します。2つ目は、モーダルウィンドウを外部からスクロールさせることです。これにより、モーダルウィンドウ内のコンテンツではなく、モーダルウィンドウ全体がスクロールします(これにより、モーダルの境界の外側に拡張できるドロップダウンやその他のUI要素を使用できます)。カスタム日付ピッカーなどのように)

ただし、垂直方向のセンタリングとスクロールバーを組み合わせると、モーダルの上部がオーバーフローし始めるため、アクセスできなくなる可能性があります。上記の例では、サイズを変更してオーバーフローを強制することができます。そうすることで、モーダルの一番下までスクロールできますが、一番上までスクロールすることはできません(最初の段落が切り取られます)。

サンプルコードへのリンクは次のとおりです(非常に簡略化されています)

https://jsfiddle.net/dh9k18k0/2/

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-x: auto;
}
.modal-container .modal-window {
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // Optional support to confirm scroll behavior makes sense in IE10
  //-ms-flex-direction: column;
  //-ms-flex-align: center;
  //-ms-flex-pack: center;
  height: 100%;
}
.modal-container .modal-window .modal-content {
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  width: 100%;
  max-width: 500px;
  padding: 10px
}

この効果(現在)Firefox、Safari、Chrome、Opera .. IE10ベンダーのプレフィックス付きcssでコメントすると、IE10で正しく動作します-IE11でのテストはまだしていませんが、動作はIE10の動作と一致すると想定しています。

どんなアイデアでもいいでしょう。既知の問題へのリンク、またはこの動作の背後にある推論も役立ちます。

7 answers

554
Michael Benjamin 2015-11-01 08:51.

問題

Flexboxを使用すると、センタリングが非常に簡単になります。

フレックスコンテナにalign-items: centerjustify-content: centerを適用するだけで、フレックスアイテムは垂直方向と水平方向の中央に配置されます。

ただし、フレックスアイテムがフレックスコンテナよりも大きい場合、この方法には問題があります。

質問で述べたように、フレックスアイテムがコンテナからオーバーフローすると、上部にアクセスできなくなります。

水平オーバーフローの場合、左側のセクションにアクセスできなくなります(RTL言語では右側のセクション)。

これはjustify-content: center、3つのフレックスアイテムを持つLTRコンテナの例です。

この動作の説明については、この回答の下部を参照してください。


解決策#1

この問題を修正するには、の代わりにフレックスボックスの自動マージンを使用しますjustify-content

auto余白、あふれフレックス項目は、垂直方向と水平方向その一部へのアクセスを失うことなくセンタリングすることができます。

したがって、フレックスコンテナのこのコードの代わりに:

#flex-container {
    align-items: center;
    justify-content: center;
}

フレックスアイテムで次のコードを使用します。

.flex-item {
    margin: auto;
}

改訂されたデモ


解決策#2(ほとんどのブラウザーにはまだ実装されていません)

次のsafeように、キーワードの配置ルールに値を追加します。

justify-content: safe center

または

align-self: safe center

CSSボックス整合モジュール仕様

4.4。オーバーフローの配置:safeおよびunsafeキーワードとスクロールの安全制限

[フレックスアイテム]が[フレックスコンテナ]よりも大きい場合、オーバーフローします。一部の配置モードは、この状況で尊重された場合、データ損失を引き起こす可能性があります。たとえば、サイドバーのコンテンツが中央に配置されている場合、オーバーフローすると、ボックスの一部がビューポートの開始エッジを超えて送信され、スクロールできなくなります。 。

この状況を制御するために、オーバーフローアライメントモードを明示的に指定できます。Unsafeアラインメントは、データ損失が発生した場合でも、オーバーフロー状況で指定されたアラインメントモードを尊重しますsafeが、アラインメントは、データ損失を回避するためにオーバーフロー状況でアラインメントモードを変更します。

デフォルトの動作では、スクロール可能な領域内に配置サブジェクトが含まれますが、執筆時点では、この安全機能はまだ実装されていません。

safe

[フレックスアイテム]のサイズが[フレックスコンテナ]を超えた場合、[フレックスアイテム]は代わりに位置合わせモードが[ flex-start]であるかのように位置合わせされます。

unsafe

[フレックスアイテム]と[フレックスコンテナ]の相対的なサイズに関係なく、指定された配置値が尊重されます。

注:ボックス位置合わせモジュールは、フレックスだけでなく、複数のボックスレイアウトモデルで使用するためのものです。したがって、上記の仕様の抜粋では、括弧内の用語は実際には「アライメントサブジェクト」、「アライメントコンテナ」、および「start」を示しています。私はこの特定の問題に焦点を合わせ続けるためにフレックス固有の用語を使用しました。


MDNからのスクロール制限の説明:

フレックスアイテムの考慮事項

Flexboxの配置プロパティは、CSSの他のセンタリング方法とは異なり、「真の」センタリングを行います。これは、フレックスコンテナがオーバーフローした場合でも、フレックスアイテムが中央に配置されたままになることを意味します。

ただし、コンテンツがある場合でもその領域にスクロールできないため、ページの上端または左端[...]を超えてオーバーフローすると、問題が発生する場合があります。

将来のリリースでは、アライメントプロパティが拡張され、「安全な」オプションも追加される予定です。

今のところ、これが懸念される場合は、代わりにマージンを使用してセンタリングを実現できます。マージンは「安全な」方法で応答し、オーバーフローした場合はセンタリングを停止するためです。

align-プロパティを使用する代わりに、auto中央に配置するフレックスアイテムにマージンを設定するだけです。

justify-プロパティの代わりに、フレックスコンテナの最初と最後のフレックスアイテムの外側の端に自動マージンを配置します。

auto余白は「フレックス」して残りのスペースを想定し、残りのスペースがある場合はフレックスアイテムを中央に配置し、ない場合は通常の配置に切り替えます。

ただし、justify-content複数行のフレックスボックスでマージンベースのセンタリングに置き換えようとしている場合は、各行の最初と最後のフレックスアイテムにマージンを配置する必要があるため、おそらく運が悪いでしょう。どのアイテムがどの行に配置されるかを事前に予測できない限り、主軸のマージンベースのセンタリングを使用してjustify-contentプロパティを確実に置き換えることはできません。

22
jejacks0n 2015-11-01 07:51.

まあ、マーフィーの法則にあるように、この質問を投稿した後に私が読んだ結果、いくつかの結果が得られました。完全には解決されていませんが、それでもある程度は役に立ちます。

投稿する前にmin-heightを少し試してみましたが、仕様にかなり新しい固有のサイズ制限に気づいていませんでした。

http://caniuse.com/#feat=intrinsic-width

min-height: min-contentフレックスボックス領域にを追加すると、Chromeの問題は解決されます。また、ベンダープレフィックスを使用すると、OperaとSafariも修正されますが、Firefoxは未解決のままです。

min-height: -moz-min-content; // not implemented
min-height: -webkit-min-content // works for opera and safari
min-height: min-content // works for chrome

Firefoxやその他の潜在的な解決策に関するアイデアをまだ探しています。

19
colinbr96 2017-12-12 09:53.

私はたった3つのコンテナでこれをなんとかやってのけました。秘訣は、フレックスボックスコンテナをスクロールを制御するコンテナから分離することです。最後に、すべてをルートコンテナに入れて、すべてを中央に配置します。効果を作成するために不可欠なスタイルは次のとおりです。

CSS:

.root {
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-container {
  margin: auto;
  max-height: 100%;
  overflow: auto;
}

.flex-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

HTML:

<div class="root">
  <div class="scroll-container">
    <div class="flex-container">
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
</div>

ここでデモを作成しました:https//jsfiddle.net/r5jxtgba/14/

4
mpen 2016-09-16 13:04.

私は解決策を見つけたと思います。たくさんのテキスト小さなテキスト動作します。幅を指定する必要はなく、IE8で機能するはずです。

.wrap1 {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
}
.wrap2 {
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.wrap3 {
  vertical-align: middle;
  display: table-cell;
}
.wrap4 {
  margin: 10px;
}
.dialog {
  text-align: left;
  background-color: white;
  padding: 5px;
  border-radius: 3px;
  margin: auto;
  display: inline-block;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}
<div class="wrap1">
  <div class="wrap2">
    <div class="wrap3">
      <div class="wrap4">
        <div class="dialog">
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
    </div>
  </div>
</div>

1
Chris Talman 2017-12-05 03:52.

MDNによると、safe値はalign-itemsとのようなプロパティに提供できるようになりましたjustify-content。それは次のように説明されています:

アイテムのサイズが配置コンテナをオーバーフローした場合、代わりに、配置モードがであるかのようにアイテムが配置されますstart

したがって、次のように使用できます。

.rule
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: safe center;
}

しかし、ブラウザがどれだけサポートしているかは不明で、使用例も見当たらず、自分でも問題を抱えています。ここで言及して、より多くの注目を集めます。

0
Nadeesh Peiris 2018-10-04 22:38.

私も追加のコンテナを使用してそれを行うことができました

HTML

<div class="modal-container">
  <div class="modal">
    <div class="content-container">
       <div class="content">
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
      </div>
  </div>  
</div>

CSS

.modal-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
}

.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #aaa;
  height: 80%;
  width: 90%;
}

.content-container {
  background-color: blue;
  max-height: 100%;
  overflow: auto;
  padding:0;
}

.content {
  display: flex;
  background-color: red;
  padding: 5px;
  width: 900px;
  height: 300px;
}

jsfiddleで> https://jsfiddle.net/Nash171/cpf4weq5/

.contentの幅/高さの値を変更して参照してください

0
Silverandrew 2019-03-17 12:45.

2テーブルフォールバックテスト済みIE8-9を使用したコンテナフレックスメソッド。フレックスはIE10,11で機能します。編集:最小限のコンテンツで垂直方向の中央揃えを確保するように編集され、レガシーサポートが追加されました。

Michaelが答えたように、この問題は、ビューポートのサイズから高さが継承され、子がオーバーフローすることに起因します。https://stackoverflow.com/a/33455342/3500688

より単純なもので、flexを使用してポップアップコンテナ(コンテンツ)内のレイアウトを維持します。

#popup {
position: fixed;
top: 0;
left: 0;
right: 0;
min-height: 100vh;
background-color: rgba(0,0,0,.25);
margin: auto;
overflow: auto;
height: 100%;
bottom: 0;
display: flex;
align-items: flex-start;
box-sizing:border-box;
padding:2em 20px;
}
.container {
background-color: #fff;
margin: auto;
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
/* width: 100%; */
max-width: 500px;
padding: 10px;
    /* display: flex; */
    /* flex-wrap: wrap; */
}
		<!--[if lt IE 10]>
<style>
	  #popup {
			display: table;
			width:100%;
		}
		.iewrapper {
			display: table-cell;
			vertical-align: middle;
		}
	</style>
	<![endif]-->
<div id="popup">
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
    <div class="container">
        <p class="p3">Test</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p class="p3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
	<!--[if lt IE 10]>
<div class="iewrapper">
<![endif]-->
</div>

Related questions

MORE COOL STUFF

「水曜日」シーズン1の中心には大きなミステリーがあります

「水曜日」シーズン1の中心には大きなミステリーがあります

Netflixの「水曜日」は、典型的な10代のドラマ以上のものであり、実際、シーズン1にはその中心に大きなミステリーがあります.

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ボディーランゲージの専門家は、州訪問中にカミラ・パーカー・ボウルズが輝くことを可能にした微妙なケイト・ミドルトンの動きを指摘しています

ケイト・ミドルトンは、州の夕食会と州の訪問中にカミラ・パーカー・ボウルズからスポットライトを奪いたくなかった、と専門家は言う.

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンがハリー・スタイルズとオリビア・ワイルドの「非常に友好的な」休憩が永続的であることを望んでいる理由

一部のファンが、オリビア・ワイルドが彼女とハリー・スタイルズとの間の「難しい」が「非常に友好的」な分割を恒久的にすることを望んでいる理由を見つけてください.

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする 

エリザベス女王の死後、ケイト・ミドルトンはまだ「非常に困難な時期」を過ごしている、と王室の専門家が明らかにする&nbsp;

エリザベス女王の死後、ケイト・ミドルトンが舞台裏で「非常に困難な時期」を過ごしていたと伝えられている理由を調べてください.

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セントヘレナのジェイコブのはしごを登るのは、気弱な人向けではありません

セント ヘレナ島のジェイコブズ ラダーは 699 段の真っ直ぐ上る階段で、頂上に到達すると証明書が発行されるほどの難易度です。

The Secrets of Airline Travel Quiz

The Secrets of Airline Travel Quiz

Air travel is far more than getting from point A to point B safely. How much do you know about the million little details that go into flying on airplanes?

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

バイオニック読書はあなたをより速く読むことができますか?

バイオニック読書はあなたをより速く読むことができますか?

BionicReadingアプリの人気が爆発的に高まっています。しかし、それは本当にあなたを速読術にすることができますか?

Total War:Warhammer:Kotakuレビュー

Total War:Warhammer:Kotakuレビュー

私はこのゲームを嫌う準備ができていました。先週の前に、Total War:Warhammerについての私の考えがありました:それでもここに私は、私の手にある完成品であり、私は変わった男です。

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

涙の道:軍事化された帝国主義勢力がスタンディングロックキャンプを占領

スタンディングロックスー族のメンバーと水の保護者は、ノースダコタ州のスタンディングロックにあるオセティサコウィンキャンプを去ります。(Twitter経由のCNNスクリーンショット)火と煙がスカイラインを覆い、スタンディングロックスー族のメンバーと水の保護者が、聖なるものを守りながら建てた家、オセティサコウィン(セブンカウンシルファイアーズ)キャンプから行進し、太鼓を打ち、歌い、祈りました。ダコタアクセスパイプラインとしても知られる「ブラックスネーク」からの土地。

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

シアーズとKマートはイヴァンカ・トランプの商品を自分たちで取り除いています

写真:APシアーズとKマートは、イヴァンカ・トランプのトランプホームアイテムのコレクションも、誰も購入したくないために削除しました。シアーズとKマートの両方の親会社であるシアーズホールディングスは、土曜日のABCニュースへの声明で、彼らが気にかけていると辛抱強く説明しましたトランプラインを売り続けるにはお金を稼ぐことについてあまりにも多く。

ポテトチップスでたった10分でスペインのトルティーヤを作る

ポテトチップスでたった10分でスペインのトルティーヤを作る

伝統的なスペインのトルティーヤは通常、オリーブオイルで柔らかくなるまで調理されたポテトから始まります(30分以上かかる場合があります)が、ケトルで調理されたポテトチップスの助けを借りてわずか10分でテーブルに置くことができます。上のビデオはすべてがバラバラにならないように裏返す方法を含め、レシピ全体を説明しますが、必要なのは4〜5個の卵と3カップのケトルチップスだけです。

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、彼らが子供たちと行っているスパイをテーマにした活動を共有しています

ケイト・ミドルトンとウィリアム王子は、子供向けのパズルの本の序文を書き、ジョージ王子、シャーロット王女、ルイ王子と一緒にテキストを読むと述べた.

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

事故で押しつぶされたスイカは、動物を喜ばせ水分補給するために野生生物保護団体に寄付されました

Yak's Produce は、数十個のつぶれたメロンを野生動物のリハビリ専門家であるレスリー グリーンと彼女のルイジアナ州の救助施設で暮らす 42 匹の動物に寄付しました。

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

デミ・ロヴァートは、新しいミュージシャンのボーイフレンドと「幸せで健康的な関係」にあります: ソース

8 枚目のスタジオ アルバムのリリースに向けて準備を進めているデミ ロヴァートは、「スーパー グレート ガイ」と付き合っている、と情報筋は PEOPLE に確認しています。

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

Plathville の Kim と Olivia Plath が数年ぶりに言葉を交わすことへようこそ

イーサン プラスの誕生日のお祝いは、TLC のウェルカム トゥ プラスビルのシーズン 4 のフィナーレで、戦争中の母親のキム プラスと妻のオリビア プラスを結びつけました。

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

仕事の生産性を高める 8 つのシンプルなホーム オフィスのセットアップのアイデア

ホームオフィスのセットアップ術を極めよう!AppExert の開発者は、家族全員が一緒にいる場合でも、在宅勤務の技術を習得しています。祖父や曽祖父が共同家族で暮らしていた頃の記憶がよみがえりました。

2022 年、私たちのデジタル ライフはどこで終わり、「リアル ライフ」はどこから始まるのでしょうか?

20 年前のタイムトラベラーでさえ、日常生活におけるデジタルおよびインターネットベースのサービスの重要性に驚くことでしょう。MySpace、eBay、Napster などのプラットフォームは、高速化に焦点を合わせた世界がどのようなものになるかを示してくれました。

ニューロマーケティングの秘密科学

ニューロマーケティングの秘密科学

マーケティング担当者が人間の欲望を操作するために使用する、最先端の (気味が悪いと言う人もいます) メソッドを探ります。カートをいっぱいにして 3 桁の領収書を持って店を出る前に、ほんの数点の商品を買いに行ったことはありませんか? あなたは一人じゃない。

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

地理情報システムの日: GIS 開発者として学ぶべき最高の技術スタック

私たちが住んでいる世界を確実に理解するには、データが必要です。ただし、空間参照がない場合、このデータは地理的コンテキストがないと役に立たなくなる可能性があります。

Language