Question

我正在尝试完成类似于Trello的布局：

kanban始终是完全可见的。
lane缩小以适合cardList。
cardList到达kanban的底部时溢出
kanban在看不见车道时会水平溢出。

我不确定如何使cardList组件溢出。我知道由于height: 100%中的.cardList属性，当前它不起作用，但是我不想给它一个固定的高度。另外，将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>

Trello类似CSS布局

0 个答案: