嵌套柔性容器不伸展到剩余的空间 [英] nested flex container not stretching to the remaining space
本文介绍了嵌套柔性容器不伸展到剩余的空间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我有一个容器并使用完整宽度和高度时，它工作的很好。
p>问题是嵌套容器也使用一个 display：flex ，不知何故，嵌套容器不会使用所有的剩余空间（只有当它们具有定义的宽度/高度时才起作用）。
< div class =flexbox-parent>
< div class =flexbox-item header>
标题
< / div>
< div class =flexbox-item填充区域内容flexbox-item-grow>
< div class =fill-area-content flexbox-item-grow>
< div class =flexbox-parent>
< div class =flexbox-item header>
第二层标题
< / div>
< div class =flexbox-item填充区域内容flexbox-item-grow>
< div class =fill-area-content flexbox-item-grow>
如何使此部分使用所有剩余的空间？ < /强><峰; br />
它也应该溢出：自动如果数据太多。
< br />
< / div>
< / div>
< div class =flexbox-item footer>
第二层页脚
< / div>
< / div>
< / div>
< / div>
< div class =flexbox-item footer>
页脚
< / div>
html，body
{
width：100％;
身高：100％;
}
.flexbox-parent
{
display：flex;
flex-direction：column;
宽度：100％;
身高：100％;
justify-content：flex-start; / *对齐主轴中的项目* /
align-items：stretch; / *对齐项目在交叉轴* /
align-content：stretch; / * Cross Axis中的额外空间* /
background：rgba（255,255,255，.1）;
}
.flexbox-item {padding：8px;}
.flexbox-item-grow {
flex：1; / *与flex相同：1 1 auto; * /
}
.flexbox-item.header {background：rgba（255，0，0，.1）;}
.flexbox-item.footer {background： rgba（0,255,0,1）;}
.flexbox-item.content {background：rgba（0，0，255，.1）;}
.fill- area
{
display：flex;
flex-direction：row;
justify-content：flex-start; / *对齐主轴中的项目* /
align-items：stretch; / *对齐项目在交叉轴* /
align-content：stretch; / *额外的跨轴空间* /
}
.fill-area-content {
background：rgba（0，0，0，.3）;
border：1px solid＃000000;
/ *当区域被挤得太远而且内容不能显示时需要* /
溢出：auto;
解决方案
其实答案已经存在这个stackoverflow线程
获取弹性项目的子项以填充高度100％
- 设置位置：相对;在孩子的父母身上。
- 设置位置：绝对;您可以根据需要设置宽度/高度（在我的示例中为100％）。
< div class =flexbox-parent>
< div class =flexbox-item header>
标题
< / div>
< div class =flexbox-item填充区域内容flexbox-item-grow>
< div class =fill-area-content flexbox-item-growstyle =position：relative;>
< div class =flexbox-parentstyle =position：absolute;>
< div class =flexbox-item header>
第二层标题
< / div>
< div class =flexbox-item填充区域内容flexbox-item-grow>
< div class =fill-area-content flexbox-item-grow>
如何使此部分使用所有剩余的空间？ < /强><峰; br />
它也应该溢出：自动如果数据太多。
< br />
< / div>
< / div>
< div class =flexbox-item footer>
第二层页脚
< / div>
< / div>
< / div>
< / div>
< div class =flexbox-item footer>
页脚
< / div>
< / div>
I am trying to create a simple flexbox layout with nested containers.
It works well when I have a single container and use the full width + height.
The problem is to have nested container also using a display: flex, somehow the nested container does not use all the remaining space (It works only if they have a defined width/height).
<div class="flexbox-parent">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
<div class="flexbox-parent">
<div class="flexbox-item header">
2nd layer header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
<strong>How to make this section use all the remaining space? </strong><br/>
It should also overflow:auto if too much data.
<br/>
</div>
</div>
<div class="flexbox-item footer">
2nd layer Footer
</div>
</div>
</div>
</div>
<div class="flexbox-item footer">
Footer
</div>
html, body
{
width: 100%;
height: 100%;
}
.flexbox-parent
{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
background: rgba(255, 255, 255, .1);
}
.flexbox-item {padding: 8px;}
.flexbox-item-grow {
flex: 1; /* same as flex: 1 1 auto; */
}
.flexbox-item.header { background: rgba(255, 0, 0, .1);}
.flexbox-item.footer { background: rgba(0, 255, 0, .1);}
.flexbox-item.content{ background: rgba(0, 0, 255, .1);}
.fill-area
{
display: flex;
flex-direction: row;
justify-content: flex-start; /* align items in Main Axis */
align-items: stretch; /* align items in Cross Axis */
align-content: stretch; /* Extra space in Cross Axis */
}
.fill-area-content{
background: rgba(0, 0, 0, .3);
border: 1px solid #000000;
/* Needed for when the area gets squished too far and there is content that can't be displayed */
overflow: auto;
}
解决方案
Actually the answer already exists on this stackoverflow thread
Getting the child of a flex-item to fill height 100%
- Set position:relative; on the parent of the child.
- Set position:absolute; on the child.
- You can then set width/height as required (100% in my sample).
<div class="flexbox-parent">
<div class="flexbox-item header">
Header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow" style="position:relative;">
<div class="flexbox-parent" style="position:absolute;">
<div class="flexbox-item header">
2nd layer header
</div>
<div class="flexbox-item fill-area content flexbox-item-grow">
<div class="fill-area-content flexbox-item-grow">
<strong>How to make this section use all the remaining space? </strong><br/>
It should also overflow:auto if too much data.
<br/>
</div>
</div>
<div class="flexbox-item footer">
2nd layer Footer
</div>
</div>
</div>
</div>
<div class="flexbox-item footer">
Footer
</div>
</div>
这篇关于嵌套柔性容器不伸展到剩余的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
