Css 用于填充父项空间的Flex item元素

我使用

flex

将两张卡50/50分开。弹性项都具有相同的高度，但我希望该项的子元素填充父项的高度。在笔中，这意味着蓝色背景颜色将扩展到其父级的高度

非常接近，但是

背景剪辑：填充框并不能解决我的问题

在线演示：


.wrapper{
最大宽度：70%；
保证金：自动；
}
.卡组{
显示器：flex；
.卡片{
弹性：1；
边框：1px实心#0074d9；
}
.卡+.卡{
左边距：30px；
}
}
.卡片图像{
img{
显示：块；
边界半径：3px；
左边距：自动；
最大宽度：90%；
}
}//卡图像
.信用卡部门{
填充：20px；
背景色：#7fdbff；
混合模式：倍增；
边界半径：3px；
利润上限：-50px；
}//.卡片部分

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿尼安矢状体（Aenean sagittis sagittis Pellentsque）

链接
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿尼安矢状体（Aenean sagittis sagittis Pellentsque）

Lorem ipsum dolor sit amet，是一位杰出的献身者。阿尼安矢状体（Aenean sagittis sagittis Pelletsque）。

链接
您可以通过添加
display:flex在
卡上
：

.card {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid #0074d9;
}

然后告诉您的
.card部分
使用
flex:1
占用剩余空间：

.card-section {
  padding: 20px;
  background-color: #7fdbff;
  mix-blend-mode: multiply;
  border-radius: 3px;
  margin-top: -50px;
  flex: 1;
}


.wrapper{
最大宽度：70%；
保证金：自动；
}
.卡组{
显示器：flex；
}
.卡片组.卡片组{
显示器：flex；
弯曲方向：立柱；
弹性：1；
边框：1px实心#0074d9；
}
.卡组.卡+.卡{
左边距：30px；
}
.卡图像img{
显示：块；
边界半径：3px；
左边距：自动；
最大宽度：90%；
}
.信用卡部门{
填充：20px；
背景色：#7fdbff；
混合模式：倍增；
边界半径：3px；
利润上限：-50px；
弹性：1；
}

标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿尼安矢状体（Aenean sagittis sagittis Pellentsque）

链接
标题
Lorem ipsum dolor sit amet，是一位杰出的献身者。阿尼安矢状体（Aenean sagittis sagittis Pellentsque）

Lorem ipsum dolor sit amet，是一位杰出的献身者。阿尼安矢状体（Aenean sagittis sagittis Pelletsque）。

链接