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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.