應用方框屬性後，子元素忽略父母的寬度

Question

相當簡單的問題，但我似乎無法找到解決這個簡單問題的方法。 我有一個我需要的元素列表，因爲特定的原因需要顛倒，這隻需要用CSS來完成，因爲後端會生成一個普通列表。

箱子方向屬性完美地實現了這一點，只有在應用它之後，子元素完全嵌入父寬度並且彼此相鄰顯示，從父箱溢出。

我該如何解決這個問題？

<div> 
    <p>Cat</p> 
    <p>Dog</p> 
    <p>Horse</p> 
</div> 

div { 
    width:50px; 
    height:100px; 
    background-color: red; 
    display:-moz-box; 
    -moz-box-direction:reverse; 
    display:-webkit-box; 
    -webkit-box-direction: reverse; 
    display:box; 
    box-direction:reverse; 
} 

p { 
    width: 50px; 
} 

例如： http://jsfiddle.net/KEYqm/2/

Answer 1

有不少東西會在這裏。

首先，舊式Flexbox模塊的屬性決不能在沒有現代屬性的情況下使用。舊的規範是不完整的，特別是Firefox的實現非常差。

其次，Flexbox與表格有許多共同之處。默認情況下，flex項目按行排列（水平），除非您明確指出flex項目應該包裝，否則它們不會。你必須在這裏作出決定：你想要的元素垂直顯示還是你希望他們能夠包裝？如果你想包裝，那麼可以支持它的瀏覽器數量減少到3：Chrome，Opera，IE10。

假設你希望他們垂直顯示，這些都是你需要的屬性：

http://codepen.io/cimmanon/pen/vomEI

div { 
    width: 50px; 
    height: 100px; 
    background-color: red; 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: vertical; 
    -moz-box-orient: vertical; 
    -webkit-box-direction: reverse; 
    -moz-box-direction: reverse; 
    -webkit-flex-direction: column-reverse; 
    -ms-flex-direction: column-reverse; 
    flex-direction: column-reverse; 
    -ms-flex-pack: end; 
    -webkit-justify-content: flex-end; 
    justify-content: flex-end; 
}