CSS-内部div不采用可用高度

这有点像母马，但它应该很简单，我需要我的

.configuration delete container

div

来获取父

div

的100%

我挂了一把小提琴，你可以看到。如果减小屏幕大小，当

.qualification行详细信息
div
（绿松石色）的内容占据2行时，
.qualification delete容器
（黄色）需要响应并采用父级的新高度

两个子div都是
display:inline块


.qualification行{
宽度：100%；
填充：10px 0px 10px 0px；
文本对齐：左对齐；
背景颜色：绿色；
}
.资格行详细信息{
宽度：计算（100%-60px）；
身高：100%；
显示：内联块；
背景颜色：青绿色；
}
.删除容器{
显示：内联块；
宽度：55px；
垂直对齐：顶部；
最小高度：100%；
浮动：未设置；
背景颜色：黄色；
}
.柔性垂直中心{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
身高：100%；
}


学位类型、分类、课程名称、年份、授予机构
删除
将您的资格鉴定行css更改为-

.qualification-row {
  display : flex; // ADD DISPLAY FLEX
  width: 100%;
  padding: 10px 0px 10px 0px;
  text-align: left;
  background-color:green;
}

将您的资格行更改为css-

.qualification-row {
  display : flex; // ADD DISPLAY FLEX
  width: 100%;
  padding: 10px 0px 10px 0px;
  text-align: left;
  background-color:green;
}

您可以使用“显示表”来执行此操作。我用显示表和表格单元格解决了这个问题。请看一看

我挂了一把小提琴，你可以看到


.qualification行{
宽度：100%；
文本对齐：左对齐；
背景颜色：绿色；
显示：表格；
}
.资格行详细信息{
宽度：计算（100%-60px）；
身高：100%；
显示：表格单元格；
}
.删除容器{
显示：表格单元格；
宽度：55px；
垂直对齐：中间对齐；
最小高度：100%；
浮动：未设置；
背景颜色：黄色；
文本对齐：居中；
}
.资格行详细信息文本{
保证金：10px 10px 10px 0；
背景颜色：青绿色；
}


学位类型、分类、课程名称、年份、授予机构
删除
您可以使用显示表来完成此操作。我用显示表和表格单元格解决了这个问题。请看一看

我挂了一把小提琴，你可以看到


.qualification行{
宽度：100%；
文本对齐：左对齐；
背景颜色：绿色；
显示：表格；
}
.资格行详细信息{
宽度：计算（100%-60px）；
身高：100%；
显示：表格单元格；
}
.删除容器{
显示：表格单元格；
宽度：55px；
垂直对齐：中间对齐；
最小高度：100%；
浮动：未设置；
背景颜色：黄色；
文本对齐：居中；
}
.资格行详细信息文本{
保证金：10px 10px 10px 0；
背景颜色：青绿色；
}


学位类型、分类、课程名称、年份、授予机构
删除
Flexbox到救援。将
display:flex
添加到班级
资格行
谢谢，我知道我遗漏了一些愚蠢的东西，但花了太长时间@RajeevRanjanFlexbox到救援。将
display:flex
添加到班级
资格行
谢谢，我知道我错过了一些愚蠢的东西，但花了太长时间在它上面@RajeevRanjanThanks，我知道这是一个选项，因为我使用这种方法支持旧的浏览器。另一个答案涉及的键盘磨损较少：）谢谢，我知道这是一个选项，因为我使用这种方法支持旧的浏览器。另一个答案涉及的键盘磨损更少：）