Css 具有100%宽度和高度的flex grow的父级的子级不会填充父级

在下面的提琴中，我试图通过使用父元素100%的宽度和高度来获取.content div以填充父元素（.side-child）的高度。.side子div具有正确的高度，唯一的问题是让.content img填充其父级（同时保持纵横比）

我可以通过将.side子位置设置为相对，将.content设置为绝对，使其工作

---

但我不明白为什么我要这么做。旁边的孩子已经有了正确的身高了吗？我猜这是因为从技术上讲.side子div没有高度值，因此不能使用100%

您也可以通过使用以下代码来实现这一点：

.flex容器{
填充：0；
保证金：0；
列表样式：无；
-ms盒方向：水平；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-moz flex；
显示：-webkit flex；
显示器：flex；
}
.第{
-webkit柔性方向：列；
弯曲方向：立柱；
浮动：左；
}
李先生{
背景：深蓝；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：50px；
高度：50px；
保证金：5px；
线高：50px；
颜色：白色；
字体大小：粗体；
字号：2em；
文本对齐：居中；
}

1
2
3
4
5

您也可以通过使用以下代码来实现这一点：

.flex容器{
填充：0；
保证金：0；
列表样式：无；
-ms盒方向：水平；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-moz flex；
显示：-webkit flex；
显示器：flex；
}
.第{
-webkit柔性方向：列；
弯曲方向：立柱；
浮动：左；
}
李先生{
背景：深蓝；
}
.弹性项目{
背景：番茄；
填充物：5px；
宽度：50px；
高度：50px；
保证金：5px；
线高：50px；
颜色：白色；
字体大小：粗体；
字号：2em；
文本对齐：居中；
}

1
2
3
4
5

这对您有用吗？

#侧边{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
宽度：50px；
}
.内容{
弹性：1自动；
背景：#ff0000；
}
.配子{
显示器：flex；
宽度：100%；
身高：100%；
}

1.
2.
3.

这对你有用吗？

#侧边{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
宽度：50px；
}
.内容{
弹性：1自动；
背景：#ff0000；
}
.配子{
显示器：flex；
宽度：100%；
身高：100%；
}

1.
2.
3.

另一种方法

#side {
  height : 100vh;
  display : flex;
  flex-direction : column;
  width : 50px;
}

.content {
  width : 100%;
  background : #ff0000;
}

.side-child {
  flex-grow: 1;
  display: flex;
  align-self: stretch;
}

---

另一种方法

#side {
  height : 100vh;
  display : flex;
  flex-direction : column;
  width : 50px;
}

.content {
  width : 100%;
  background : #ff0000;
}

.side-child {
  flex-grow: 1;
  display: flex;
  align-self: stretch;
}

---

我就是这样做的

    #side {
    height : 100vh;
    display : flex;
    flex-direction : column;
    width : 50px;
    }

    .content {
    height : 100%;
    background : #ff0000;
    position : absolute;
    }

    .side-child {
    flex-grow : 1;
    position : relative;
    }

---

我就是这样做的

    #side {
    height : 100vh;
    display : flex;
    flex-direction : column;
    width : 50px;
    }

    .content {
    height : 100%;
    background : #ff0000;
    position : absolute;
    }

    .side-child {
    flex-grow : 1;
    position : relative;
    }

---

这样，它们的生长速度就超过了它们的父级宽度50px……它们真的应该这样做吗？是的，在我的真实应用程序中，我没有这个限制，对meHmm来说这不是问题，那么为什么你给我们错误的工作条件呢？宽度只是为了演示JSFIDLE而添加的，由于最初没有图像来弥补宽度，这意味着宽度为0，因此它们会超出其父宽度50px…它们真的应该这样做吗？是的，在我的真实应用程序中，我没有这个限制，对我来说这不是问题吗，那么，为什么给我们错误的条件来使用呢？宽度只是添加到演示JSFIDLE中，因为最初没有图像来弥补宽度，这意味着宽度为0