Question

我做了一些事情＆＃34; Trello＆＃34;或＆＃34; Zenhub＆＃34;董事会（看板）和我遇到了一个问题。我在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。

WIKI

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

CSS - 使列inline-flex不高

1 个答案: