Question

我有一个Flex容器，其中有两个或多个弹性项目排列在一列中。顶部弹性项目（A）是Bootstrap Collapse面板。底部柔性项目（B）具有两个水平放置的div（D和E）。当塌陷面板（B）膨胀时，底部（C）应缩小以保留在容器（A）中，迫使两个孩子（D和E）收缩，如果其内容太大，则使用overflow-y:scroll;很大，但它不起作用。相反，C向下延伸到A的底部。如果我将overflow-y:scroll;应用于C，它可以工作，但我最终在C的右侧有一个无用的滚动条。

这是一个图表：

+------------------------+
| A: Flex Container      |
| +--------------------+ |
| | B: Collapse Panel  | |
| +--------------------+ |
| +--------------------+ |
| |  C: Bottom item    | |
| | +-------+ +------+ | |
| | | D     | |  E   | | |
| | +-------+ +------+ | |
| +--------------------+ |
+------------------------+

我的代码位于http://codepen.io/pdebarros/pen/jWGKrE的codepen上这是我的代码：

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container" style="display: flex; flex-direction: column; height: 260px; border: 10px solid red;">
    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Collapsible panel (section B)</a>
        </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">Panel Body</div>
          <div class="panel-footer">Panel Footer</div>
        </div>
      </div>
    </div>
    <div style="background-color: yellow; height: 100%; display: flex; flex-direction: row;">
      <div style="width:40%; background-color: lightgreen; overflow-y: scroll; ">
        Section D
        <ul>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
      </div>
      <div style="width:50%; background-color: pink; overflow-y: scroll;">Section E</div>

    </div>
  </div>

</body>

</html>

我知道在相关问题上还有很多其他问题，但我找不到解决这一特定问题的问题。正如经常发生的那样，在写这个问题的过程中，我发现了答案。我会把它放在下面。

Answer 1

诀窍是将overflow-y: hidden;应用于底部项目（C）。显然，垂直剪切具有overflow-y:scroll的div会导致滚动条激活。

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container" style="display: flex; flex-direction: column; height: 260px; border: 10px solid red;">
    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4 class="panel-title">
          <a data-toggle="collapse" href="#collapse1">Collapsible panel (section B)</a>
        </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
          <div class="panel-body">Panel Body</div>
          <div class="panel-footer">Panel Footer</div>
        </div>
      </div>
    </div>
    <div style="background-color: yellow; height: 100%; display: flex; flex-direction: row; overflow-y:hidden;">
      <div style="width:40%; background-color: lightgreen; overflow-y: scroll; ">
        Section D
        <ul>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
          <li>1</li>
        </ul>
      </div>
      <div style="width:50%; background-color: pink; overflow-y: scroll;">Section E</div>

    </div>
  </div>

</body>

</html>

当可用空间更改时，弹性项目不会留在父级内

1 个答案: