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

我在这件事上遇到了麻烦，需要一些帮助。我正在尝试创建一个两列布局，宽度和高度都根据左列的内容进行调整。这似乎是一个相当基本的布局，但我开始认为这是不可能做到的（不诉诸JS）

描述我正在尝试做的事情。这是一个容器DIV，内部有两个DIV，水平对齐。左侧内部DIV应根据其内容调整其大小（宽度和高度）。当填充容器的剩余宽度时，右内DIV（包含一个谷歌地图）的高度应与左内DIV相同

<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>

我发现了许多类似的问题，但在所有这些情况下，左DIV/列的宽度都是固定的，这使它更容易

任何输入都非常受欢迎，尤其是在IE9+和现代浏览器中

编辑

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

css:

html

此DIV应进行调整

其宽度和高度均

对其内容，不占用

超出需要的空间





更多内容在这里。。。

右边的DIV（包含谷歌地图）
应与左DIV的高度相同，
填充剩余宽度时。

怎么做

这里是我想到的->

当您删除

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

CSS

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

这不管用。也许从我的描述中还不清楚，但是谷歌地图应该填满正确的一栏。试着在我的问题中链接到的小提琴中设置一个固定的高度（例如100px）。这不起作用。也许从我的描述中还不清楚，但是谷歌地图应该填满正确的一栏。尝试在我的问题中链接的小提琴中设置一个固定高度（例如100px）。
    .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%;
}

    <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>

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