html - Child elements ignore parents width after applying box-direction property -

fairly simple question, can't seem find fix simple problem. have list of elements need reversed specific reasons, needs done css only, since backend generates normal list.

the box-direction property perfectly, after applying it, child elements totally ingore parents width , display next each other, overflowing out of parent box.

how can fix this?

<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; } 

example: http://jsfiddle.net/keyqm/2/

there's quite few things going on here.

first of all, properties old flexbox module should never used without modern properties go them. old specification incomplete , firefox implementation in particular poor.

second of all, flexbox has quite few things in common tables. default, flex items laid out in row (horizontal) , unless explicitly flex items should wrap, won't. have make decision here: want elements display vertically or want them able wrap? if want wrapping, number of browsers can support reduced 3: chrome, opera, ie10.

assuming want them displayed vertically, these properties need:

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; }