Css 难以理解下一个flexbox全高行为

我们有一个布局，我们希望一个滑块图像，以填补其家长的高度

通过将图像插入内联背景样式，我们实现了静态图像示例无滑块，然后使用flexbox确保div填充其父级的高度，我们无法获得高度：100%；要工作-即使将其应用于父级，也会按照其他人的建议将dom拆分为正文或html-请参见此处：

但是我们很难理解如何获得滑块继承flexbox的全高行为所需的额外div

见：

有没有人知道如何将flexbox的布局行为应用到孙子辈身上，使其像第一个JSFIDLE一样工作

---

任何指向正确方向的指针都将不胜感激。

声明flexbox的子项也是flexbox。此外，为什么要使用flexbox浮动并直接设置其宽度。flexbox背后的整个理念是，它的孩子们从他们的flex基础上成长或缩小，以填满可用空间。无需浮动，弯曲方向设置水平或垂直堆叠

在我的书《功能CSS》（Functional CSS）中，我介绍了flex box的基础，该书在Amazon上仍然免费提供。如果您感兴趣，欢迎您查看

这是小提琴：

CSS代码：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

h1 {
    text-align: center;
}

p {
    line-height: 2em;
}

img {
    width: 100%;
    height: auto;
}

.hero {
    background-color: #eeeeee;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;

    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.hero-image,
    .hero-text {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
}

.hero-text {
    padding: .5em 2em 0;
}

.hero-image {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.hero-image > .hero-gallery {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    outline: 1px dotted red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* make slide background image stretch to fit */
.hero-slide {
    position: relative;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
}

.hero-slide:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("http://placehold.it/1200x1200");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* make slide img tag transparent so we can use background-size above */
.hero-slide img {
    margin: 0;
    line-height: 0;

    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);

    /* modern browsers */
    opacity: 0;
}


.hero-text {
    padding: .5em 2em 0;
}

---

谢谢你的回复，但是你发布的JSFIDLE不起作用。如果将结果窗格的宽度减小到文本比图像长，请注意，子div和图像的高度没有达到其父级的高度？还是我错过了一些简单的东西？浮动和宽度是我所有失败尝试留下的-对此感到抱歉！谢谢你，我一定会看看你的书。对不起，我想我已经解决了，在你的.hero image>.hero gallery>.hero幻灯片中添加了.hero image>.hero gallery>.hero slide。hero gallery，declaration-这是正确的处理方法吗？我的解决方案没有关注图像。你要求英雄形象的孩子们跨越100%的高度。看红色点的轮廓。它总是保持在全高。而且，如果将“结果”窗格扩展到最大值，图像永远不会溢出。是的，我正在尝试让所有子对象继承最终父对象的完整高度。我试过高度：100%宽度：自动；但图像消失了。不管怎样，在每个孩子身上复制你的flexbox声明是有效的：谢谢。看看更新的代码，这里是更新的fiddle。图像延伸至英雄幻灯片：。

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

h1 {
    text-align: center;
}

p {
    line-height: 2em;
}

img {
    width: 100%;
    height: auto;
}

.hero {
    background-color: #eeeeee;
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;

    display: -moz-box;
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.hero-image,
    .hero-text {
    -webkit-flex: 1 1 50%;
    flex: 1 1 50%;
}

.hero-text {
    padding: .5em 2em 0;
}

.hero-image {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.hero-image > .hero-gallery {
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
    outline: 1px dotted red;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

/* make slide background image stretch to fit */
.hero-slide {
    position: relative;
    -webkit-flex: 1 1 100%;
    flex: 1 1 100%;
}

.hero-slide:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url("http://placehold.it/1200x1200");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* make slide img tag transparent so we can use background-size above */
.hero-slide img {
    margin: 0;
    line-height: 0;

    /* IE 8 */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    /* IE 5-7 */
    filter: alpha(opacity=0);

    /* modern browsers */
    opacity: 0;
}


.hero-text {
    padding: .5em 2em 0;
}