作者：TXCWB_523 | 2023-09-10 19:31
我正在使用flexbox为一个站点搭建基本UI.与通常的电子邮件布局非常相似.
出于某种原因,第二个孩子(类.main-body,海藻绿柱,layouted Flexbox的容器的颜色)( .content-main,李子色)比其母公司,这一点我一个更大的高度不希望它.
我制作了一个codepen代码段来显示这种行为.
html,
body {
width: 100%;
height: 100%;
background: lightblue;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.container {
height: inherit;
background: PeachPuff;
padding: 1em;
display: flex;
max-height: 500px;
}
.sidebar {
flex: 0 1 15%;
background: khaki;
}
.content {
flex: 1 1 auto;
background: plum;
padding: 0.8em;
display: flex;
flex-direction: column;
}
.content-header {
background: lightgreen;
padding: 0.3em;
flex: 0 0 7%;
}
.content-main {
display: flex;
background: darkseagreen;
padding: 1em;
height: 100%;
flex: 1 1 auto;
}
.main-list {
flex: 0 0 12%;
background: lightcoral;
}
.main-body {
flex: 0 1 auto;
padding: 1em;
background: lightcyan;
display: flex;
flex-flow: row wrap;
overflow-y: scroll;
}
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
如何防止绿色孩子的身高比梅子父母更大？我希望孩子只能滚动但不会比父母高.
1> Oriol..：
Flexbox引入auto了新的初始值min-height.它使弹性物品的长度与其内容一样高.
您可以撤消通过设置min-height到0,旧的初始值:
.content-main {
min-height: 0;
}
html,
body {
width: 100%;
height: 100%;
background: lightblue;
box-sizing: border-box;
}
* {
box-sizing: border-box;
}
.container {
height: inherit;
background: PeachPuff;
padding: 1em;
display: flex;
max-height: 500px;
}
.sidebar {
flex: 0 1 15%;
background: khaki;
}
.content {
flex: 1 1 auto;
background: plum;
padding: 0.8em;
display: flex;
flex-direction: column;
}
.content-header {
background: lightgreen;
padding: 0.3em;
flex: 0 0 7%;
}
.content-main {
display: flex;
background: darkseagreen;
padding: 1em;
height: 100%;
flex: 1 1 auto;
min-height: 0;
}
.main-list {
flex: 0 0 12%;
background: lightcoral;
}
.main-body {
flex: 0 1 auto;
padding: 1em;
background: lightcyan;
display: flex;
flex-flow: row wrap;
overflow-y: scroll;
}
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| First |
Second |
Third |
Third |
Third |
Third |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
| 1 |
1 |
1 |
1 |
1 |
1 |
京公网安备 11010802040832号