Dynamic width parent with flexbox column wrapping?

Question

Parent has only display: flex and flex-wrap: wrap, while children have a fixed height and width of 150px. Which behaves like this:

The height of the parent container expands vertically to facilitate the wrapping children elements.

However, changing the parent to have flex-direction: column doesn't have the same behaviour horizontally:

Instead of the parent expanding to fit the wrapping content, it's the children elements that get rearranged to be facilitated within the parent element.

The behaviour I'd like to achieve with the vertically wrapping content looks like this:

Well almost like this. Imagine the parent fills the space vertically, and expands horizontally for the wrapping content. A horizontal version of the first gif.

Is this possible with flex-box?

Answer 1

You're looking for align-content: start (it deprecated flex-start so grid and flexbox get unified syntax):

div {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: start;
}
span {
  width: 150px;
  height: 150px;
  border: 2px solid #f66;
  background-color: #eee;
  color: #f66;
  font: italic 2.1em sans-serif;
  padding: .21em;
}
body {
  background-color: #f95b68;
}
body { margin: 0;}
* {box-sizing: border-box}

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span>13</span>
  <span>14</span>
</div>