Css 使列具有相同的高度，同时保留对象并占用所有可用空间

这里是CSS游乐场：

我正在制作某种看板表，在那里可以创建任务（带黄色边框的白色框）并在列之间拖放它们

• 列是一个背景为浅灰色的框
• Darkgray div是我可以放置/拖动任务框的地方

现在，这里有一些问题。带有“+”按钮的暗灰色框正在其父lightgray div外移动。这是因为暗灰色div设置为

height:100%

，因为我希望它占用列中的所有可用空间。如果我删除它，darkgray div将收缩，列的空间将减少，无法放置任务

我想完成几件事：

• 如果列彼此相邻，则列的高度必须相同（如果屏幕较小且列位于下方，则不需要相同的高度）
• “+”按钮必须粘贴到最后一个任务的底部（或者整个列，如果更容易的话）
• darkgray div应该尽可能大，而不会人为改变列的高度（因为用户必须有放置任务的位置）

---

我应该怎么做才能使它看起来正确？

此解决方案适合我：

.ltg-column-inside {
    background-color: rgb(151, 151, 151);
    border: white solid 1px;
    display: flex;
    overflow: auto;
    height: auto;

}

---

使用

dispaly:flex

到

.ltg列中

.ltg-column-inside{
dispaly:flex
}

如果不希望灰色部分删除此部分：

.task-box{
    height: 6rem;
}

---

不完全是我的意思。下面是不同任务编号的情况：并且“+”按钮仍在lightgray之外。在你的截图上是正确的。您是否已将所做的所有更改粘贴到此处？将最小高度：95px添加到内部的.ltg列中，它也可以工作。如果您不需要灰色空格，请将宽度：填充添加到任务框。这与我的意思不完全一致。以下是不同任务编号的情况：

.ltg-column-inside{
dispaly:flex
}

.task-box{
    height: 6rem;
}