CSS水平调整div到子元素高度的大小

我已经建立了以下程序

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>
#left{
  display: inline-block;
}
#right{
  display: inline-block;
  min-height: 800px;
  height: 100%;
}

#左{
显示：内联块；
}
#对{
显示：内联块；
最小高度：800px；
身高：100%；
}

我试图使容器的高度与左或右div中较高者的高度相同。但是容器的大小只是重新调整到了#左div的高度？当左div的高度小于右div时，右div与页脚重叠（显然是因为最小高度）。

---

有什么想法吗

我认为最快的解决方案是使用

display:table cell

。应该是这样的：

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

#container {
  display:table;
    width:100%;
    border:1px solid red;
}
#container div {
    border:1px solid red;
    width: 50%;
}
#left{
  display: table-cell;
  background-color: lightgray;  
}
#right{
  display: table-cell;
  height: 100px;
  background-color: lightblue;
}