CSS - 使列inline-flex不全高[关闭]

Question

我正在制作“Trello”或“Zenhub”板（看板），我遇到了一个问题。我在div＃board中有4列显示：内联flex，所以一切都很好，并且有完全工作的水平堆栈列，但它也为每列提供相同的高度。有没有解决方案，所以每列只有最小高度：400px;如果没有卡？

Here is JSFiddle

#board {
  overflow-x: auto;
  min-height: calc(100vh - 154px) !important;
  padding: 0 2rem 2rem 0;
}

div.column-container {
  display: inline-flex;
}
/* -= COLUMN =- */

div.column {
  order: 1;
  width: 400px;
  min-width: 400px;
  min-height: 100px;
  margin: 2rem;
  border-radius: .8rem;
  padding: .5rem;
}

Answer 1

默认情况下，您的容器将其项目设置为使用align-items stretch，这意味着项目将填充容器的高度，您可以覆盖此行为，将项目设置为flex-start。

https://jsfiddle.net/RACCH/puhyo7oa/

div.column-container {
    display: inline-flex;
    align-items: flex-start;
}