Создание одинаковой высоты столбцов при одновременном размещении объекта на всем доступном пространстве

Question

Вот CSS площадка: 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 - это место, где я могу поместить / перетащить поля задач

Теперь здесь есть несколько проблем.Темно-серый ящик с кнопкой «+» перемещается за пределы родительского светлого цвета.Это потому, что для darkgray div установлено значение height: 100%, так как я хочу, чтобы он занимал все доступное пространство в столбце.Если я удаляю это, темные и темные div-элементы и столбцы имеют меньше места для размещения задач.

Я хочу выполнить несколько вещей:

• столбцы должны иметь одинаковую высоту если они лежат рядом друг с другом (если экран меньше и столбцы расположены ниже, то одинаковая высота не требуется)
• "+" кнопка должна быть прикреплена к нижней частипоследнее задание (или весь столбец, если это будет проще)
• darkgray div должен быть как можно большего размера без искусственного изменения высоты столбца (поскольку у пользователя должно быть место для удаления заданий).

Что я должен сделать, чтобы он выглядел правильно?

Answer 1

используйте dispaly:flex до .ltg-column-inside

.ltg-column-inside{
dispaly:flex
}

, если не хотите, чтобы серая секция удалила это:

.task-box{
    height: 6rem;
}

Answer 2

Это решение работает для меня:

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

}