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

Question

对此有点母马，但它应该很简单，我需要我的.qualification-delete-containerdiv拿走 100% 的父div。

我附上了小提琴，所以你可以看到。如果减小屏幕尺寸，当.qualification-row-detailsdiv的内容(绿松石色(占据 2 行时，.qualification-delete-container(黄色(需要响应并采用父级的新高度。

两个孩子div 都是display:inline-block

.qualification-row {
width: 100%;
padding: 10px 0px 10px 0px;
text-align: left;
background-color:green;
}
.qualification-row-details {
width: calc(100% - 60px);
height: 100%;
display: inline-block;
background-color: turquoise;
}
.qualification-delete-container {
display: inline-block;
width: 55px;
vertical-align: top;
min-height: 100%;
float: unset;
background-color: yellow;
}
.flex-vertical-center {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}

<br/>
<div class="qualification-row js-qualification-row">
<div class="qualification-row-details">
degree type, classification, Course title, year, awarding instition
</div>
<div class="qualification-delete-container">
<div class="flex-vertical-center">
<a class="qualification-delete">delete</a>
</div>
</div>
</div>

Answer 1

将限定行 css 更改为 -

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

Answer 2

您可以使用显示表来执行此操作。我已经通过使用显示表和表格单元格解决了它。请看一看.

我附上了小提琴，所以你可以看到。

.qualification-row {
width: 100%;
text-align: left;
background-color:green;
display: table;
}
.qualification-row-details {
width: calc(100% - 60px);
height: 100%;
display: table-cell;
}
.qualification-delete-container {
display: table-cell;
width: 55px;
vertical-align: middle;
min-height: 100%;
float: unset;
background-color: yellow;
text-align: center;
}
.qualification-row-details-text {
margin: 10px 10px 10px 0;
background-color: turquoise;
}

<br/>
<div class="qualification-row js-qualification-row">
<div class="qualification-row-details">
<div class="qualification-row-details-text">
degree type, classification, Course title, year, awarding instition
</div>
</div>
<div class="qualification-delete-container">
<a class="qualification-delete">delete</a>
</div>
</div>