CSS Flexbox模塊：當視口縮小時不會考慮最小寬度/寬度

Question

我試圖使用css3 flexbox模塊爲了使表列可以拉伸但仍然具有默認寬度以及有一個最小寬度和最大寬度。

當視口足夠寬以容納每個列的最小寬度時，此功能可以很好地工作，但是當視口縮小時，所有列都將摺疊。有沒有什麼好的方法可以確保最小寬度/寬度始終保留爲flexboxes，或者有任何其他方式具有可以「flex」的表格列。迄今爲止，我只用Chrome 21測試過這個。

CSS：

#test, #test > thead, #test > tbody { 
    display: block; 
    width: 100%; 
} 

#test tr { 
    display : -webkit-flex; 
} 

#test tr > td, #test tr > th { 
    -webkit-flex-direction: row; 
} 

.col1 { 
    width: 35px; 
} 

.col2 { 
    -webkit-flex: 1 200px; 
    width: 120px; 
    max-width: 2000px; 
} 

.col3 { 
    -webkit-flex: 1 150px; 
    width: 80px; 
    max-width: 2000px; 
} 

.col4, .col5 { 
    width: 70px; 
} 

.col6 { 
    width: 75px; 
} 

.col7 { 
    -webkit-flex: 1 100px; 
    width: 100px; 
    max-width: 2000px; 
} 

.col8 { 
    width: 55px; 
} 

.col9 { 
    -webkit-flex: 1 100px; 
    width: 60px; 
    max-width: 100px; 
} 

.col10 { 
    width: 80px; 
} 

HTML：

<table id="test"> 
    <thead> 
     <tr> 
      <th class="col1">col1</th> 
      <th class="col2">col2</th> 
      <th class="col3">col3</th> 
      <th class="col4">col4</th> 
      <th class="col5">col5</th> 
      <th class="col6">col6</th> 
      <th class="col7">col7</th> 
      <th class="col8">col8</th> 
      <th class="col9">col9</th> 
      <th class="col10">col10</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="col1">col1</td> 
      <td class="col2">col2</td> 
      <td class="col3">col3</td> 
      <td class="col4">col4</td> 
      <td class="col5">col5</td> 
      <td class="col6">col6</td> 
      <td class="col7">col7</td> 
      <td class="col8">col8</td> 
      <td class="col9">col9</td> 
      <td class="col10">col10</td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

好了，這似乎是Chrome錯誤。我嘗試了Chrome Canary，並且css似乎在那裏工作。