两个底部相同，一个溢出的div;无法让它发挥作用

Question

我有两个与同一父div并排的div。第一个div的高度大于第二个div的高度，我希望父级的高度与第二个div的高度相同。我希望两个div具有相同的底边（这样第一个div将溢出父div）。如何实现这一目标？

为了更清晰，这里有一张图片：

每个矩形都是不同的div;我该如何进行这种设置？

Answer 1

{{1}}

Answer 2

绝对定位较高的div，以便它的布局不会影响父级，并让它bottom: 0;将它与父div的底部对齐。

* { box-sizing: border-box; }
body {
  padding: 5em 0 0;
} 
.parent {
  border: 1px solid black;
  position: relative;
}
.tall {
  position: absolute;
  border: 1px solid green;
  left: 0; bottom: 0; width: 50%;
  height: 5em;
}
.short {
  border: 1px solid purple;
  margin-left: 50%;
}

<div class="parent">
  <div class="tall">tall</div>
  <div class="short">short</div>
</div>

Answer 3

试试这个：

#child_1{
  height:20px;
  border: 1px solid black;
  width:200px;
  float:left;
}
#child_2{
  height:30px;
  border: 1px solid red;
    width:200px;
  float:left;
}
#parent{
  height:20px;
  border: 5px solid green;
    width:404px;
}

<div id="parent">
<div id="child_1">
child 1 div
</div>
<div id="child_2">
child2  div
</div>
</div>