Flexbox 子项高度答案

【问题标题】：Flexbox child heightFlexbox 子项高度
【发布时间】：2017-11-28 07:55:11
【问题描述】：

我正在尝试标记待办事项列表。我正在尝试将div.main-tasks height 设置为等于div.tasks 所以div.main-tasks 填充整个div.tasks 并且无法弄清楚如何做到这一点 pic

我正在使用 bootsrap 4 flexbox。请帮我找到解决方案。谢谢建议

这里是代码笔https://codepen.io/enoltc/pen/NwLwmO

【问题讨论】：

codepen.io/anon/pen/wPEYaB

标签： html css flexbox bootstrap-4

【解决方案1】：

尝试添加

 height:calc(100vh - 80px);

在.task div上

.task {
  margin: 10px 0;
  height:calc(100vh - 80px);
}

【讨论】：

或 min-height 如果您的内容是动态的并且需要动态高度

【解决方案2】：

只需添加这两条规则

.tasks{
    display: flex;
    flex-direction: column;
    padding-top: 80px;
    position :relative;
    }

.tasks-header {
    margin: 0;
    width: 100%;
    position: absolute;
    top: 0;
}

【讨论】：

@EgorNovozhilov 重做，只是改变这两个类。