問題（ボトム配列された項目）

Question

私たちは、次のようなレイアウトを持っている：

レイアウトが揃っリスト（青コンテナ）トップを示しているが、我々は整列リストを下にする必要があり。コンテナ（オレンジ色）をflexにしてそれを完成させてから、赤いコンテナflex: 1を作ったが、Safariでは動作しない。

scssはそのようになります。リストが成長するときにSafariで

.orange-container { 
     display: flex; 
     flex-direction: column; 

     .red-container { 
      flex: 1; 
     } 

     .blue-container { 
      // Nothing 
     } 
    } 

、それは赤色容器と上記容器（ホワイトボックス）と重なります。

flexプロパティに-webkitベンダーを追加しようとしましたが、何も変更されていません。

は、私が問題

問題何ができるか任意のアイデアをilustrateするgit repoを作成しましたか？

Answer 1

私は次のようにして解決策を見つけた：

.orange-container { 
    display: flex; 
    flex-direction: column; 

    .red-container { 
     flex-grow: 1; 
    } 

    .blue-container { 
     flex-shrink: 10; 
    } 
} 

flex-growは助けたが、Safariで問題を解決しませんでした。 ChromeとIEはすべてうまくいっていましたが、Safariではアイテムがスペースを欠いているため、アイテムが互いに非常に接近していたため、flex-shrink: 10で解決しました。

これが最善の解決策であればわかりませんが、Safariの問題を解決しました。私はまだこの点についてフィードバックを得ることができれば幸いです。

EDIT：

：は

ので、より多くのビットを研究した後、私はそれが結果であるので、私は、私がリストでめちゃくちゃを取得しないように望んでいたものを、容器のためのflex-schrink: 0を使用することができること、が分かりました

.orange-container { 
    display: flex; 
    flex-direction: column; 

    .white-container { 
     flex-schrink: 0; 
    } 

    .red-container { 
     flex-shrink: 0 
     flex-grow: 1; 
    } 

    .blue-container { 
     // Nothing 
    } 
}