如何将子div的高度扩展到父元素的高度？

Question

我有两个在同一行上对齐的

，它们之间由一条垂直线隔开，我希望该线始终具有父

的高度。

我尝试了所有找到的解决方案，但都无法解决问题（不能使用position:absolute，并且在父级上使用display:table或overflow:hidden没有效果）。

JSFIDDLE

这是我的代码：

HTML：

<div class="parent-div">
  <div class="first-child">
    <span class="block">Item</span>
    <span class="block">Item</span>
    <span class="block">Item</span>
  </div>
  <div class="second-child">
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span>
    <span class="block">Content here</span> 
  </div>
</div>

CSS：

.parent-div {
  background:green;
  display: inline-block;
  width: 100%;
}

.first-child,
.second-child {
  float: left;
}

.first-child {
  width: 50px;
  border-right: 2px solid red;
}

.second-child {
  padding-left: 10px;
}

.block {
  display: block;
}

- Valip

Answer 1

你可以将display:inline-block修改为display:flex;，应用于.parent-div元素。

请查看演示。

- Carl0s1z

Answer 2

如果你将父级 div 的 display 属性设置为 table，就像这样：

.parent-div {
height: 100%;
display: table;
}

对于子元素，使用表格单元格 (table-cell) 并移除浮动，代码如下：

.first-child,
.second-child {
  display:block;
      height: 100%;
    }

Check this: https://jsfiddle.net/k45f4Ls2/5/

- Yo.Meyers