<div class="box">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

<style>
  .box {
    position: absolute; /* auto width */
    height: 300px;
    background-color: gray;
    display: flex;
    flex-flow: column wrap;
  }

  .box > div {
    height: 80px;
    width: 80px;
    background-color: pink;
    margin: 10px;
  }
</style>

<style>
  .box {
    position: absolute;
    height: 300px;
    background-color: gray;
    writing-mode: vertical-lr;
    text-orientation: upright;
    font-size: 0;
  }

  .box > div {
    font-size: 14px;
    display: inline-block;
    height: 80px;
    width: 80px;
    background-color: pink;
    margin: 10px;
  }
</style>

<div class="flex">
  <div class="child-1"></div>
  <div class="child-2">
    <div class="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
  </div>
</div>

<style>
  .flex {
    height: 500px;
    display: flex;
    flex-flow: column nowrap;
  }
  .child-1 {
    height: 200px;
    flex-shrink: 0;
  }
  .child-2 {
    flex-grow: 1;
    height: 0;
    overflow: hidden;
  }
</style>

<style>
  .box {
    position: absolute;
    height: 300px;
    background-color: gray;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, auto);
  }

  .box > div {
    width: 80px;
    background-color: pink;
    margin: 10px;
  }
</style>