应用 box-direction 属性后，子元素会忽略父元素的宽度

Question

相当简单的问题，但我似乎无法找到解决这个简单问题的方法。 我有一个出于特定原因需要反转的元素列表，这仅需要使用 CSS 来完成，因为后端会生成一个普通列表。

box-direction 属性完美地做到了这一点，只有在应用它之后，子元素才会完全忽略父元素的宽度并彼此相邻显示，溢出父框。

我该如何解决这个问题？

<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 与表格有很多共同点。默认情况下，弹性项目排成一行（水平），除非你明确说弹性项目应该换行，否则它们不会。您必须在这里做出决定：您希望元素垂直显示还是希望它们能够换行？如果要换行，那么可以支持的浏览器数量减少到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;
}