Question

我正在尝试创建以下内容：一个.mainFlex容器，包含3个弹性框。

box1 永远不会很高。它不需要滚动，扩展或缩小。可以说它可以占容器高度的10％。
box2 具有可变内容。如果它只有一两行，那么它应该只与该内容一样高。如果它有更多，它可以扩展到40％的高度，为box3留下至少50％的容器高度。一旦达到最大40％的容器高度，溢出应该在box2上滚动。
box3 应占用80％，即父容器高度的50％。溢出应该是可滚动的。

codepen： http://codepen.io/JWindels/pen/XbLLop

app.config(['$resourceProvider', function($resourceProvider) {
  $resourceProvider.defaults.stripTrailingSlashes = false;
}]);

services.factory('Project', ['$resource',
    function($resource) {
        return $resource('api/project/:id/', {}, {
            query: {
                method: 'GET',
                url: 'api/projects/',
                isArray: true,
                transformResponse: function(data, headers) {
                    return angular.fromJson(data).results;
                },
            },  
        });
    }
]);

我的问题：
以百分比设置max-heights不会启用溢出：滚动到功能。但是，如果我在box2和box3中使用em测量最大高度，我冒着让box3中的内容超过父容器高度的风险，即使滚动也无法看到。

Answer 1

这似乎运作正常：

.FCpanel > .mainFlex > .box1 {
  max-height: 10%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box2 {
  max-height: 40%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
  flex: 1;
  overflow: auto;
}

＆＃13;

.FCpanel {
  overflow: hidden;
  border-radius: 0.5em;
  margin-bottom: 1em;
}
.FCpanel > .mainFlex {
  background: #ebf6fd;
  box-shadow: 0em 0.125em 0.5875em #666;
  font-family: "OpenSans-Bold", "Open Sans", sans-serif;
  padding: 0px;
  border: solid 1px #428cca;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  height: 516px;
  color: #fff;
  font-size: 1.4em;
}
.FCpanel > .mainFlex > .box1 {
  max-height: 10%;
  overflow: auto;
  background-color: #f00;
}
.FCpanel > .mainFlex > .box2 {
  background-color: #0f0;
  max-height: 40%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
  flex: 1;
  overflow: auto;
  background-color: #00f;
}

＆＃13;

<div class="container">
  <div class="row">
    <div class="FCpanel">
      <div class="mainFlex col-xs-8">
        <div class="box1">This is some text</div>
        <div class="box2">some text sdjks sjkhsdkjh sk sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk</div>
        <div class="box3">is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sd sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text
          sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his
          is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s</div>
      </div>
      <div class="mainFlex col-xs-2 col-xs-offset-1"></div>
    </div>
  </div>
</div>

＆＃13;

基本上，height: auto; flex-basis: auto使box1和box2与内容一样高。

然后max-height阻止他们成长。

注意Flexbox会将auto添加为min-height的初始值，因此为了使max-width正常工作，您可以使用min-height: 0或设置overflow除visible以外的任何内容，这使得min-height: auto的行为与min-height: 0相似。

在这种情况下，我使用overflow: auto，只有在必要时才会生成滚动条。

最后，将flex: 1设置为box3会使其增长以填充剩余空间（flex-grow: 1），忽略其内容（flex-basis: 0%）。

请注意，这些框将具有默认的flex-shrink: 1，但它们永远不会缩小，因为它们的高度不会超过100％。如果您想确定，请随意设置flex-shrink: 0。

Flexbox布局中的多个滚动div与受约束的父容器？

1 个答案: