web-dev-qa-db-ja.com

FF 33.x Flexbox FF 34.xの動作を取得するにはどうすればよいですか？

私たちはflexbox=をWebアプリのようなデスクトップアプリケーションに多用し、うまく機能しています。

しかし、最新のFirefox Developer Edition（35.0a2）では、レイアウトは期待どおりに動作しません（ビューポートを超えて拡大します）： http://tinyurl.com/k6a8jde

これはFirefox 33.1で正常に機能します。

これはflexboxここで説明する変更と関係があると思います： https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

しかし残念ながら、FF 34または35.xでFF 33.xの動作を取得する方法がまだわかりません。

レイアウトに関する問題や、問題をより適切に切り分ける方法については歓迎します。

firefoxflexbox
37
Timm

関連する違いは、「暗黙の最小サイズのフレックスアイテム」、flexbox仕様の新機能（または、削除されて再導入された機能）です。

古い動作を復元する最も簡単な（最も不明瞭な）方法は、このスタイルルールを追加することです：* { min-height:0 }（またはmin-width、水平フレックスボックスのオーバーフローが心配な場合。ただし、テストケースには垂直フレックスコンテナからのオーバーフローに関する問題のみがあるようです）.

その変更でフィドルを更新しました： http://jsfiddle.net/yoL2otcr/1/

本当に設定する必要があるのはmin-height:0特定の要素-特に、各要素で以下が必要です。

  1. 「列」指向のフレックスコンテナの子

  2. オーバーフローを許可する背の高い子孫があります（おそらく、ここでのように、「overflow：scroll」を持つ中間要素によって適切に処理されます）

（あなたの場合、ネストされた多くのflexコンテナ内に単一の高い要素があるため、実際にはこれらの要素のネストされた山があります。したがって、おそらくmin-height:0残念ながら。

（興味があるなら、このバグには、この仕様変更によりウェブ上で壊れたコンテンツの詳細と例があります： https://bugzilla.mozilla.org/show_bug.cgi?id= 104352 ）

70
dholbert

これらの修正は、機能していても機能しませんでした。私の場合、display: table-cellフォールバック、引き継いでいるようです。次のようなSASSを使用すると、IEでFFに影響を与えることなくフォールバックが機能します。

flex: auto; // or whatever   
.ie & {
  display: table-cell;
}
2
mlaroy

それよりも簡単ですフレックスに子供を与えるだけです

.flex-child {
  flex: 1;
  overflow: hidden;
}

使わずに min-width: 0ハック

0
Maged Mohamed