どのような状況でフレックスシュリンクがフレックスエレメントに適用され、どのように機能しますか？

Question

私はこの素晴らしいCSS Flexbox demo pageで遊んだことがありましたが、私はコンセプトのほとんどを理解していますが、flex-shrinkを見ることができませんでした。私がそこに適用する設定が何であれ、私はページに違いは見られません。 specから

：

<「フレックス成長」>

このコンポーネントセット「フレックス成長」手書きとどのくらいのフレックス項目が意志決定する、 フレックス因子を育てる指定 正の空き領域が配布されている場合は、フレックスコンテナ内のフレックスアイテムの残りの部分に対して、 を成長させます。省略された場合、 '1'に設定されます。

<「フレックス収縮」>

このコンポーネントセット「フレックス収縮」手書き及びフレックスアイテムが フレックスアイテムの残りの部分に対して収縮するどのくらい決定 フレックス収縮率を、指定フレックスコンテナ に負の空き領域がある場合。省略すると、 '1'に設定されます。負のスペースを分配する場合、フレックスシュリンクファクタにフレックスベーシスを掛けます。

flex-shrinkはどのような場合に適用されますか（つまり、負のスペースが配信される場合）？私はオーバーフローを作るために、フレックスボックスの要素の幅とその中の要素の（min-）幅を設定してカスタムページを試しましたが、それは記述されていないようです。

既にサポートされていますか？

解決策として、リンクされたデモまたはJSFiddleのようなライブデモのオプションのセットが高く評価されます。

Answer 1

実際にはflex-shrinkを見るには、その容器を小さくする必要があります。

HTML：

<div class="container"> 
    <div class="child one"> 
    Child One 
    </div> 

    <div class="child two"> 
    Child Two 
    </div> 
</div> 

CSS：

div { 
    border: 1px solid; 
} 

.container { 
    display: flex; 
} 

.child.one { 
    flex: 1 1 10em; 
    color: green; 
} 

.child.two { 
    flex: 2 2 10em; 
    color: purple; 
} 

• http://jsfiddle.net/GyXxT/（接頭辞 - オペラやFirefoxのナイトリービルド）
• http://jsfiddle.net/GyXxT/1/（webkitの）

この例では、両方の子要素が理想的には10emの幅になりたいと考えています。親要素の幅が20emを超える場合、2番目の子要素は1番目の子要素の2倍の余分な領域を占め、大きく見えるようになります。親要素が20em以下の場合、2番目の子要素は1番目の要素要素の2倍の大きさになり、小さく見えるようになります。

現在のフレックスボックスのサポート：Opera（接頭辞なし）、Chrome（接頭辞）、IE10（接頭辞付きですが、わずかに異なるプロパティ名/値を使用します）。 Firefoxは現在、2009年の古い仕様（接頭辞）を使用していますが、新しい仕様は現在実験的なビルドでは使用できません（接頭辞なし）。