防止在柔性盒子元素中纏繞線條

Question

如何防止柔性盒子元素的線條纏繞？它甚至有可能嗎？

我試圖創建一個兩列的網格，Flexbox，就用下面的標記：

<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元素應該只有一樣寬，它必須'，使得所有文本的內部不換行到第二行。 .can-wrap元素將佔用剩餘空間，並在需要時包裝。

我使用這個CSS（含prefrix免費）：

.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不被列爲支持此屬性（因爲它沒有在他們添加了Flexbox的執行時間的規範存在）。您可以改用flex屬性。

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