css - 使列高度相同，同时包含对象占用所有可用空间

Question

这是 CSS Playground :https://www.bootply.com/HHeQ3n0EbT

<div class="container">
                <div class="row">
                    <div class="col ltg-column-parent">
                        Column
                        <div class="ltg-column-inside">
                            <div class="task-box">
                                content
                            </div>
                          <div class="task-box">
                                content
                            </div>
                          <div class="task-box">
                                content
                            </div>
                        </div>
                        <div class="task-table-bottom-buttons">
                            <button>+</button>
                        </div>

                    </div>
                  <div class="col ltg-column-parent">
                        Column
                        <div class="ltg-column-inside">
                            <div class="task-box">
                                content
                            </div>
                        </div>
                        <div class="task-table-bottom-buttons">
                            <button>+</button>
                        </div>

                    </div>
                  <div class="col ltg-column-parent">
                        Column
                        <div class="ltg-column-inside">
                            <div class="task-box">
                                content
                            </div>
                        </div>
                        <div class="task-table-bottom-buttons">
                            <button>+</button>
                        </div>

                    </div>
                </div>
            </div>

CSS:

.ltg-column-parent {
    margin: 1px;
    padding: 0;
    background-color: lightgray;
    padding-bottom: 1rem;
}

.ltg-column-inside {
    background-color: rgb(151, 151, 151);
    height: 100%;
    /* border: white solid 1px; */
}

.task-box {
    width: 10rem;
    height: 6rem;
    color: black; 
    background-color: white;
    border: 1px solid lightgray;
    border-left: 7px solid yellow;
    padding-left: 1rem;
    padding-top: 1rem;
    display: inline-block;
}

.task-table-bottom-buttons {
    position: relative;
    bottom: 0px;
}

我正在制作某种看板表，您可以在其中创建任务(带有黄色边框的白框)并将它们拖放到列之间。

• 列是一个带有 lightgray 背景的框。
• Darkgray div 是我可以放置/拖动任务框的地方

现在，这里有一些问题。带有“+”按钮的深灰色框正在移出其父浅灰色 div。这是因为 darkgray div 设置为 height: 100% 因为我希望它占用列中的所有可用空间。如果我删除它，darkgray div 会缩小并且列中可以放置任务的空间会减少。

我想完成几件事:

• 列必须具有相同的高度如果它们彼此相邻放置(如果屏幕较小并且列位于下方，则不需要相同的高度)
• “+”按钮必须贴在最后一个任务的底部(或者整列，如果这样更容易的话)
• darkgray div 应该尽可能大，不要人为改变列的高度(因为用户必须有放置任务的地方)。

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

Answer 1

这个解决方案适合我:

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

}