Trello alike CSS макет

Question

Я пытаюсь выполнить sh макет, подобный Trello:

• kanban всегда полностью виден.
• lane сжимается, чтобы соответствовать cardList.
• cardList переполняется, когда достигает дна kanban
• kanban, переполняется горизонтально, когда полосы видны.

I ' Я не уверен, как переполнить компонент cardList. Я знаю, что в настоящее время это не работает из-за свойства height: 100% в .cardList, но я бы не хотел указывать ему фиксированную высоту. Кроме того, я не могу переполнить kanban по горизонтали, когда добавляю overflow-x: scroll к .kanban.

Вот также codesandbox на случай, если это проще.

:root {
  --padding-card: 4px;
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  height: 90vh;
}

.kanbanWrapper {
  background: black;
  height: 100%;
  overflow: hidden;
}

.kanban {
  display: inline-flex;
  background: lightgrey;
  border-radius: 4px;
  padding: 1rem;
  margin: 1rem;
}

.kanban .lane {
  margin: 0 var(--padding-card);
}

.lane {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: lightpink;
  width: 200px;
  overflow: auto;
}

.laneHeader {
  font-weight: bold;
  border: 1px solid black;
  padding: 0.5rem 0;
}

.laneFooter {
  font-weight: bold;
  border: 1px solid green;
}

.cardList {
  padding: 4px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  border: 1px solid blue;
}

.cardList .card {
  margin: var(--padding-card);
}

.card {
  background: lightgreen;
  border-radius: 4px;
  padding: 1rem 2rem;
}

<div class="App container">
  <div class="kanbanWrapper">
    <div class="kanban">
      <div class="lane">
        <div class="laneHeader">To do</div>
        <div class="cardList">
          <div class="card">Card 1 Longer title...</div>
          <div class="card">Card 2</div>
          <div class="card">Card 3</div>
          <div class="card">Card 4</div>
          <div class="card">Card 5</div>
          <div class="card">Card 6</div>
          <div class="card">Card 7</div>
          <div class="card">Card 8</div>
          <div class="card">Card 9</div>
          <div class="card">Card 10</div>
          <div class="card">Card 11</div>
          <div class="card">Card 12</div>
        </div>
        <div class="laneFooter">+ Add card</div>
      </div>
      <div class="lane">
        <div class="laneHeader">Doing</div>
        <div class="cardList">
          <div class="card">Card 11</div>
          <div class="card">Card 12</div>
          <div class="card">Card 13</div>
          <div class="card">Card 14</div>
          <div class="card">Card 15</div>
          <div class="card">Card 16</div>
          <div class="card">Card 17</div>
        </div>
        <div class="laneFooter">+ Add card</div>
      </div>
      <div class="lane">
        <div class="laneHeader">Done</div>
        <div class="cardList">
          <div class="card">Card 21</div>
          <div class="card">Card 22</div>
        </div>
        <div class="laneFooter">+ Add card</div>
      </div>
      <div class="lane">
        <div class="laneHeader">Quality</div>
        <div class="cardList"></div>
        <div class="laneFooter">+ Add card</div>
      </div>
    </div>
  </div>
</div>