「オーバーフロー コンテナーのフレックス項目の先頭までスクロールできません」のタイトルは次のように書き換えられます:「オーバーフロー コンテナーのフレックス項目の先頭までスクロールできません」
<p>フレックスボックスを使用して便利なモーダルを作成しようとしているときに、ブラウザの問題と思われる問題に遭遇し、既知の修正または回避策があるかどうか、または修正方法についてのアイデアがあるかどうか疑問に思っていました。 </p>
<p>私が解決しようとしている問題には 2 つの側面があります。まず、モーダル ウィンドウを垂直方向に中央揃えにすることは期待どおりに機能します。 2 つ目は、モーダル ウィンドウをスクロール (外部スクロール) することで、モーダル ウィンドウ内のコンテンツではなく、モーダル ウィンドウ全体がスクロールします (これにより、カスタム ウィンドウのように、モーダルの範囲を超えて拡張できるドロップダウン メニューやその他の UI 要素を使用できます)日付ピッカーは待ちます)。 </p>
<p>ただし、垂直方向のセンタリングをスクロールバーと組み合わせて使用すると、モーダルの上部がオーバーフローし始めてアクセスできなくなる可能性があります。上の例では、サイズを変更して強制的にオーバーフローさせることができます。その際、モーダルの下部まではスクロールできますが、上部まではスクロールできません（最初の段落が切り取られています）。</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.modal-container {
位置: 固定;
トップ: 0;
左: 0;
下: 0;
右: 0;
背景: rgba(0, 0, 0, 0.5);
オーバーフロー-x: 自動;
}
.modal-container .modal-window {
表示: -ms-flexbox;
ディスプレイ: フレックス;
フレックス方向: 列;
整列項目: 中央;
コンテンツの位置揃え: 中央;
/* IE10 でのスクロール動作が意味があることを確認するためのオプションのサポート
//-ms-flex-direction: 列;
//-ms-flex-align: センター;
//-ms-flex-pack: センター; */
高さ: 100%;
}
.modal-container .modal-window .modal-content {
境界線: 1px 実線 #ccc;
境界半径: 4px;
背景: #fff;
幅: 100%;
最大幅: 500ピクセル;
パディング: 10px
}</pre>
<pre class="brush:html;toolbar:false;"><div class="modal-container">
<div class="モーダルウィンドウ">
<div class="モーダルコンテンツ">
<p class="p3">Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。 Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。 1960 年代に、Lorem Ipsum の一節を含む Letraset シートのリリースによって普及し、さらに最近では、Lorem Ipsum のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング ソフトウェアによって普及しました。</p>
<p class="p3">Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。 Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。 1960 年代に、Lorem Ipsum の一節を含む Letraset シートのリリースによって普及し、さらに最近では、Lorem Ipsum のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング ソフトウェアによって普及しました。</p>
<p class="p3">Lorem Ipsum は、印刷および植字業界の単なるダミー テキストです。 Lorem Ipsum は、無名の印刷業者が活字のゲラをスクランブルして活字見本帳を作成した 1500 年代以来、業界の標準的なダミーテキストです。それは 5 世紀だけでなく、電子写植への飛躍の時代にも、本質的には変わっていないまま生き残ってきました。 1960 年代に、Lorem Ipsum の一節を含む Letraset シートのリリースによって普及し、さらに最近では、Lorem Ipsum のバージョンを含む Aldus PageMaker などのデスクトップ パブリッシング ソフトウェアによって普及しました。</p>
</div>
</div>
</div></pre>
<p><br /></p>
<p>これは (現在の) Firefox、Safari、Chrome、Opera に影響します。興味深いことに、IE10 では、IE10 プロバイダーの以前の CSS を削除した場合、その動作は確実です - IE11 にはありません</p> テストを行っていますが、IE10 に合わせて実行されています。
<p>これは例示的なコードの接続（高度化）です</p>
<p>https://jsfiddle.net/dh9k18k0/2/</p>
