鉻顯示問題與靈活

Question

我正在使用顯示器：flex， 我正在處理ul元素列表。不知道爲什麼我得到兩個不同的結果： 問題問題與鉻： Browsers_Pic 這就是我想要做的事： http://jsfiddle.net/0fbdgfcq/26/

ul { 
    max-width:800px; 
    display: flex; 
    flex-direction: row-reverse; 
    background-color: blue; 
    height: 100px; 
    max-width: 500px; 
    min-width: 100px; 
    padding:0; 
} 

.box{ 
/* Clean */ 

} 
.g p{ 
    white-space:nowrap; 
    text-align:center; 
    color:white; 
    text-decoration:none; 
    font-size:3vw; 
} 
.g li { 
    flex: 1 0; 
    width: 15%; 
    height: auto; 
    color:white; 
    font-size:3vw; 
    list-style-type: none; 
    word-wrap: break-word; 

} 
.g img { 
    width: 100%; 
    height: 100%; 
    max-width:100px; 
    max-height:100px; 

} 

Answer 1

嘗試添加以下內容：

ul { 
    Position: relative; 
} 

    .g p { 
    Position: relative 
    } 

這是爲了防止您的段落溢出。

這可能會解決問題。

如果不嘗試將其添加到您的li以及。

Answer 2

副手我會說這個問題是你應用的width:15%，它重寫了列表項的彎曲。

嘗試

.g li { 
    flex: 1 0 15%; 
} 

JSfiddle