フレックスボックス子要素の折り返し行を防止する

Question

フレックスボックス要素の折り返しを防止するにはどうすればよいですか？それも可能ですか？

私は次のマークアップとフレキシボックスで2つの列のグリッドを作成しようとしています：

<div class="flex-container"> 
    <div class="no-wrap">this should not wrap</div> 
    <div class="can-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam debitis consequuntur incidunt neque vel in blanditiis id optio distinctio culpa rem voluptatibus quas architecto ratione assumenda omnis laboriosam? Earum esse.</div> 
</div> 

.no-wrap要素が唯一のように広いことは、このような内部のテキストのすべてのこと「にする必要がある」とする必要があります2行目に折り返しません。 .can-wrap要素は残りの領域を占有し、必要に応じて折り返します。

私は（prefrix無料で）このCSSを使用しています：

.flex-container{ 
    display:flex; 
} 

.no-wrap{ 
    flex-basis:initial; 
} 

私はflex-basis:initialが折り返し行から要素を防ぐだろうと思った - https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

ここcodepenです：http://codepen.io/jshawl/pen/bknAc

私は.no-wrap要素の幅を修正できることは知っていますが、行の折り返しを防ぐのに十分な幅にするにはどうしたらよいですか？

.no-wrap要素のフロート相当するものは次のようになります。

.no-wrap{ 
    display:block; 
    float:left; /* be as wide as need be! */ 
} 

Answer 1

あなたが探しているプロパティはフレックス縮小、ないフレックス基礎です。

.no-wrap{ 
    flex-shrink: 0; 
} 

（それは彼らがフレキシボックス実装を追加時の仕様に存在しないように）IE10は、このプロパティをサポートするように表示されていないことに注意してください。代わりにフレックスプロパティを使用することができます。

.no-wrap{ 
    flex: 0 0 auto; 
}