Question

我希望灵活容器中的孙子最大高度包含容器的总高度（100％）减去另一个子高度，然后当孙子达到最大尺寸时会出现滚动条。

这是一个显示它的小提琴，基本上我不希望列表项溢出绿色容器。

＆＃13;

$hotels = Hotels::with('location', 'rooms')->get();
$tours = Tours::with('location')->get();
$merged = $hotels->merge($tours);

＆＃13;

body {
  display: flex;
  flex-direction: column;
  height: 80vh;
}

#header {
  background-color: red;
  height: 30px;
}

#main {
  background-color: green;
  display: flex;
  height: 100%;
  flex-direction: column;
}

#panel {
  height: 100%;
}

#panel-top {
  height: 80px;
  border-style: solid;
}

#panel-bottom-overflow {
  border-style: solid;
  overflow-y: auto;
}

#footer {
  background-color: yellow;
  height: 30px;
}

＆＃13;

Answer 1

通过向主包装器body, #main, #panel，display: flex;提供列方向，应该占用剩余空间（#main, #panel, #panel-bottom-overflow）flex: 1的子项，最后添加一个额外的包装器滚动，你的意志最终会结束。

额外scroller通过使用绝对定位克服了溢出元素需要高度的问题。

注意，此解决方案还可以在标题，面板和页脚上删除固定高度（我做了，但是你当然可以把它们添加回来）并按其内容调整大小，它仍然有用。

＆＃13;

body, #main, #panel {
  display: flex;
  flex-direction: column;
}
#main, #panel, #panel-bottom-overflow {
  flex: 1;
}

body {
  height: 80vh;
}
#header {
  background-color: red;
  padding: 5px;
}
#main {
  background-color: green;
}
#panel-top {
  border-style: solid;
  padding: 30px 5px;
}
#panel-bottom-overflow {
  position: relative;
  border-style: solid;
}
#panel-bottom-overflow .scroller {
  position: absolute;
  top: 0; left: 0;
  right: 0; bottom: 0;
  overflow: auto;
}
#footer {
  background-color: yellow;
  padding: 5px;
}

＆＃13;

<div id="header">
  Header
</div>
<div id="main">
  <div id="panel">
    <div id="panel-top">
      Top Panel
    </div>
    <div id="panel-bottom-overflow">
      <div class="scroller">
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
    </div>
  </div>
</div>
<div id="footer">Footer
</div>

＆＃13;

Answer 2

您需要为溢出元素定义高度。如果有高度限制，则可以触发overflow属性。将其添加到您的代码中：

#panel-bottom-overflow { height: calc(100% - 80px); }

您的绿色容器（#main）有一个孩子（#panel）。这两个元素都设置为height: 100%。

子元素有两个子元素：#panel-top和#panel-bottom-overflow。

#panel-top设置为height: 80px。

如果兄弟没有高度限制，内容可能会明显溢出（overflow: visible是默认设置），但overflow: auto需要设置高度或max-height才能使滚动条生效。

revised fiddle

＆＃13;

body {
  display: flex;
  flex-direction: column;
  height: 80vh;
}

#header {
  background-color: red;
  height: 30px;
}

#main {
  background-color: green;
  display: flex;
  height: 100%;
  flex-direction: column;
}

#panel {
  height: 100%;
}

#panel-top {
  height: 80px;
  border-style: solid;
}

#panel-bottom-overflow {
  border-style: solid;
  overflow-y: auto;
  height: calc(100% - 80px);  /* NEW */
}

* { box-sizing: border-box; } /* NEW */

#footer {
  background-color: yellow;
  height: 30px;
}

＆＃13;

<body>
  <div id="header">
  </div>
  <div id="main">
    <div id="panel">
      <div id="panel-top">
        Top Panel
      </div>
      <div id="panel-bottom-overflow">
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
    </div>
  </div>
  <div id="footer">
  </div>
</body>

＆＃13;

Flexbox子溢出自动尊重父高度

2 个答案: