CODEWITHSUNDEEP
htmlcsstwitter-bootstrapflexbox
Paul de Barros
Paul de Barros

Reputation: 1200

flex item doesn't stay inside parent when available space changes

I have a flex container (A) with two or more flex items arranged in a column. The top flex item (B) is a Bootstrap Collapse panel. The bottom the bottom flex item (C) has two divs (D and E) placed horizontally. When the collapse panel (B) expands, the bottom (C) should shrink to remain in the container (A), forcing the two children (D and E) to shrink, making use of overflow-y:scroll; if their content is too large, but it doesn't work. Instead, C extends downward beyond the bottom of A. If I apply overflow-y:scroll; to C, it works, but I end up with a useless scroll bar on the right side of C.

Here is a diagram:

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

My code is on codepen at http://codepen.io/pdebarros/pen/jWGKrE Here is my code:

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

I know there are many other questions on related issues, but I couldn't find one that addresses this particular issue. And as often happens, in the process of writing the question, I discovered the answer. I will put it below.

Upvotes: 1

Views: 1970

Answers (1)

Paul de Barros
Paul de Barros

Reputation: 1200

The trick was to apply overflow-y: hidden; to the bottom item (C). Apparently, vertically clipping a div that has overflow-y:scroll causes the scroll bar to activate.

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

Upvotes: 1

Related Questions