柔性：在面板的其余部分填充面板

Question

我正在尝试填充表面的其余部分，直到我的页脚具有面板和样式panel-grow-shrink，但它不起作用。有什么想法吗？

.flex-column-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: stretch;
}

.panel-grow-shrink {
    order: 0;
    flex: 1 1 auto;
    align-self: stretch;
	background-color:red;
}

.btn-toolbar {
    /*margin-left: -5px;*/
}
.panel-body {
    padding: 15px;
}
body{
    background-color:yellow;
}

<div class="flex-column-container">
    <div>
        <h1><span>Title</span></h1>
    </div>
    <div class="panel-body">
        <div class="panel-grow-shrink">
				Panel to fill the rest of the region
        </div>
        <div class="btn-toolbar">
            <button type="button" >Button1</button>
            <button type="button" >Button2</button>
            <button type="button" >Button3</button>
            <button type="button" >Button4</button>
        </div>
    </div>
</div>

我想在页面底部添加页脚，面板panel-grow-shrink应该取表面其余部分的高度。在此示例中，页脚不在底部。

Answer 1

您正在设置flex-column-container以显示flex。这意味着包含标题和div的div与类＆＃34; panel-body＆＃34;将以弹性方式显示。 ＆＃34;面板成长收缩＆＃34;和＆＃34; btn-toolbar＆＃34;在里面＆＃34; panel-body＆＃34;并且不会以弹性方式显示，因为没有显示：＆＃34; panel-body＆＃34;上的flex css。我添加了一个代码片段来澄清。

＆＃13;

＆＃13;

.flex-column-container{
  display:flex;
  flex-direction:column;
  background-color:blue;
  min-height:350px;
}

.title{
}

.panel-body {
    display: flex;
    flex-direction: column;
    background-color:pink;
    flex-grow:1; /*expands to fill remaining space*/
}

.panel-grow-shrink {
   flex-grow:1;/*expands to fill remaining space*/
	background-color:red;
}

.btn-toolbar {
    /*margin-left: -5px;*/
}
.panel-body {
    /*padding: 15px;*/
}

＆＃13;

<div class="flex-column-container">
    <div class="title">
        <h1><span>Title</span></h1>
    </div>
    <div class="panel-body">
        <div class="panel-grow-shrink">
				Panel to fill the rest of the region
        </div>
        <div class="btn-toolbar">
            <button type="button" >Button1</button>
            <button type="button" >Button2</button>
            <button type="button" >Button3</button>
            <button type="button" >Button4</button>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;