web-dev-qa-db-ja.com

Flexbox Firefox、EdgeおよびIE

レスポンシブアプリを作ろうとしています。より大きな画面では、divのリストがあり、スクロールupして、前のdivを表示できます（「従来の」動作）。小さい画面では、同じリストが表示されますが、順序が逆になるため、下にスクロールするとdivが表示されます。

flexboxはこれに対する素晴らしい解決策になるだろうと思いました、そしてそれは... Chromeでした。

HTMLは次のとおりです。

<div id="list">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

そして、CSS：

#list {
  display: flex;
  flex-direction: column-reverse;
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}

.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}

それを示すためのフィドルと同様に： http://jsfiddle.net/jbkmy4dc/3/

Chromeでは、listdivにスクロールバーが正しく表示されます。ただし、FirefoxおよびIE/Edgeでは、スクロールバーは表示されますが、無効になっています。

何か案は？ベンダープレフィックスがないのでしょうか？

htmlcssinternet-explorerfirefoxflexbox
19
TranquilMarmot

回避策として、コンテナのスタイルを2つの異なるコンテナに分散させることができます。

  • サイズ、ボーダー、オーバーフローのある外側のもの
  • flexboxスタイルの内側のもの

デフォルトで一番下までスクロールしたい場合は、JSを使用できます： divの一番下までスクロールしますか？

function scrollToBottom(el) { el.scrollTop = el.scrollHeight; }
scrollToBottom(document.getElementById('list'));
#list {
  height: 250px;
  overflow-y: scroll;
  border: 1px solid black;
}
#inner-list {
  display: flex;
  flex-direction: column-reverse;
}
.item {
  flex: 1;
  padding: 2em;
  border: 1px dashed green;
}
<div id="list">
  <div id="inner-list">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
  </div>
</div>
12
Oriol

これはFirefox、Edge、IE11のバグです。

flex-direction: column-reverseスクロールバーはChromeでのみ表示されます。

columnに切り替えると、スクロールバーはすべてのブラウザで機能します。

詳しくは：

12
Michael_B

このfirefox-bugはまだ存在しているので、 Michael_Bによる回答 で提供される2番目のリンクの下で、kumarharshはスクロールダウン動作を持つ2つのcssのみの「奇抜な回避策」を提供することに注意してください。クロムのように。 kumarharshの投稿 から flexbugsのphilipwaltonリスト ：

それまでは、2つの変換を使用したいくつかの厄介な回避策があります： http://jsfiddle.net/RedDevil/qar7Lc5s/ （回転変換）または http://jsfiddle.net/RedDevil/0z5t6j9m / （スケール変換-より良いIMO）

短所：ソリューションはtransformを使用し、Firefoxではスクロール時にコンテンツの鮮明さが失われます。また、スクロール動作が逆さまになっているか、スクロールバーが反対側にあります。

1
davide

これはFirefoxでは既知の bug であり、bugzillaにログインしています。
投票してください このバグ 。

彼らは今年それを修正することを検討しています（バグが開かれてからわずか6年後）

0
Podge