CSS列布局-DIV具有动态宽度和与同级相同的高度

Question

我在这个问题上遇到了困难，需要一些帮助。我正在尝试创建一个两列布局，根据左列的内容调整宽度和高度。这似乎是一个相当基本的布局，但我开始认为这是不可能做到的（如果不使用JS）。

这个fiddle描述了我要做的事情。它是一个容器DIV，里面有两个DIV，水平对齐。左侧内部DIV应根据其内容调整其大小（宽度和高度）。右边的内部DIV（包含一个Google Map）应该与左边的高度相同，同时填充容器的剩余宽度。

<div id="container">
    <div id="left">
        This DIV should adjust<br/>
        both its width and height<br/>
        to its content, not taking up<br/>
        more space than needed!<br/>
        <br/><br/><br/>
        More content here...
    </div>
    <div id="right">
        Google Map here.
    </div>
</div>

我尝试了我所知道的一切，也尝试了我发现的所有技巧，但都没有成功！

#container {
    background-color: #EEE;
    overflow: hidden;
}
#container div {
    border: 1px solid black;
    padding: 5px;
}
#left {
    background-color: lightblue;
    display: inline-block;
    float: left;
}
#right {
    background-color: lightgreen;
    height: 100%; /* THIS IS WHAT I WANT, BUT IT WON'T WORK, OF COURSE */
    overflow: hidden;
}

我发现了很多类似的问题，但在所有这些情况下，左边的DIV/列都有固定的宽度，这让它变得容易多了。

任何输入都非常值得赞赏，尤其是如果它能在IE9+（和现代浏览器）中工作！

编辑

一些澄清。右栏的目的是保存一个谷歌地图，因此地图应该填满整个DIV。试着在我链接到上面的小提琴中为#right设置一个固定的高度（例如100px），你会看到地图显示出来。

Answer 1

jsfiddle演示

css：

    .container {
    overflow: hidden;
    background-color: #EEE;
}
.column {
    float: left;
    background-color: grey;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

p {
    padding: 10px;
    margin-top: 10px;
    width: 50%;
}

html

    <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>

<div class="container">
<div class="column">
        This DIV should adjust<br/>
        both its width and height<br/>
        to its content, not taking up<br/>
        more space than needed!<br/>
        <br/><br/><br/>
        More content here...
</div>
<div class="column">
<div id="map"></div>
</div>
</div>
<p>
    The right DIV (which contains a Google Map)
    should be the same height as the left DIV,
    while filling up the remaining width.
</p>
<p>How to do that?</p>

Answer 2

这里是我想出的->链接

删除#right div的overflow属性时，它会按预期拉伸。但是在这种情况下，您将无法隐藏溢出的内容。

CSS

#right {
    background-color: lightgreen;
    height: 100%; /* THIS WON'T WORK */  // height works as expected      
}