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

【问题标题】：CSS - Making columns inline-flex with not full height [closed]CSS - 使列 inline-flex 不全高[关闭]
【发布时间】：2018-02-28 22:24:16
【问题描述】：

我正在制作“Trello”或“Zenhub”板（看板），但遇到了问题。我在 div#board 中有 4 列显示：inline flex，所以一切都很好地排列，并且有完全工作的水平列堆栈，但它也为每列设置了相同的高度。有没有解决方案，所以每一列都只有 min-height: 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;
}

【问题讨论】：

标签： jquery html css flexbox materialize

【解决方案1】：

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

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

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

【讨论】：

谢谢 ^^ 它的工作.. 我不知道解决方案这么简单。