html - 如何调整滚动容器高度使可滚动内容完美调整

Question

我有一个带有 overflow-y:scroll 的容器。 内容高于容器高度，因此滚动。

问题是当容器紧挨着一个 div 时如何自动调整容器的高度，该 div 将一个更宽的容器 div 拆分为具有固定高度。

这是一个fiddle

我的代码如下:

   <div  ng-repeat="t in p.tabs" 
        class="tabContent" 
        ng-class="currentTab==t.name?'selected':''"
        >
        <div>
            <h2>{{t.displayName}}</h2>
        </div>
        <div class="vScrollable">
            <ul>
                <li ng-repeat="l in t.description">
                    {{l}}
                </li>
            </ul>
        </div>
    </div>

CSS:

.popover .tabContent {
    border-top: dotted 1px gray;
    display: none;
    height: 50px;
    background-color: red;
}

.vScrollable {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    background-color: lightblue;
}

Answer 1

赞this ？

我又做了一次尝试并想出了这个。它使用 CSS flexbox，这是我能做的最好的。

一些新的 CSS(我也对 HTML 做了一些小改动，添加了一个包装器):

.popover .tabContent > .wrapper {
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  height: 100%;
}
.popover .tabContent > .wrapper div {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  margin : 4px;
}
.popover .tabContent > .wrapper .vScrollable {
  -moz-box-flex: 2;
  -webkit-box-flex: 2;
  -ms-flex: 2;
  -webkit-flex: 2;
  flex: 2;
}

编辑:使用 fiddle 的新答案