换列时，容器不被撑大如何解决？答案在这

<div class="wrap">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
  </ul>
  <div class="item"></div>
</div>

Css正常写法是这样：

.wrap {
  display: flex;
}
.item {
  width: 50%;
}
ul {
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: 1px solid red;
}
ul li {
  list-style: none;
  width: 50px;
  border: 1px solid #000;
}

但没达成预期效果，容器没有被撑大。将CSS改为以下的样子，效果实现。

ul {
  flex-direction: row;
  writing-mode: vertical-lr;
}
ul li {
  writing-mode: horizontal-tb;
}

因为使用横向布局时可以正常撑开父元素，所以使用flex-direction: row;横向布局，再通过给父元素writing-mode: vertical-lr;，子元素writing-mode: horizontal-tb;，曲线实现竖向布局。