<ul class="FlexContainer">

  <li class="FlexItem">One</li>

  <li class="FlexItem">Two</li>

  <li class="FlexItem">Three</li>

  <li class="FlexItem">Four</li>

  <li class="FlexItem">Five</li>

  <li class="FlexItem">Six</li>

  <li class="FlexItem">Seven</li>

  <li class="FlexItem">Eight</li>

  <li class="FlexItem">Nine</li>

  <li class="FlexItem">Ten</li>

</ul>

​

/**

 * Flexbug demo 14.1.b (workaround)

 */

​

.FlexContainer {

  display: inline-flex;

  flex-flow: wrap;

  height: 13em;

  writing-mode: vertical-lr;

}

​

.FlexItem {

  writing-mode: horizontal-tb;

}

​

​

/* Presentational styles */

/* not demo related      */

​

.FlexContainer {

  outline: 1px solid red;

  list-style: none;

  margin: 1em;

  padding: .5em;

}

.FlexItem {

  background: hsla(0,0%,0%,.1);

  margin: .5em;

  padding: 1em;

}

​