How to use flexbox inside a fixed container?

Question

I have a div that is position: fixed; within the viewport. Within this are a series of child elements that use display: flex; and I need a scrollable element to fill 100% of the height of the flexed element. The problem I am having is that because done of the parent elements of the scrollable element have a fixed height, so the scrollable element just pushed the bottom of the flexed element rather than scroll.

Please see the following JSBin example. In this example, the blue block needs to extend to 100% the height of the red block, with the contents of the blue block still being scrollable. Needs to work in IE10+, latest Firefox and Chrome:

https://jsbin.com/terimim/edit?html,css,output

Something like this? https://jsbin.com/jefuzidojo/1/edit?html,css,output — Michael Benjamin, Sep 08 '17 at 16:44

score 1 · Accepted Answer · answered Sep 08 '17 at 17:19

There are two primary issues causing the layout problem. They are each explained here:

revised demo

* {
  box-sizing: border-box;
  min-height: 0;
}

body {
  background-color: #eaeaea;
}

#menu {
  background-color: #fff;
  position: fixed;
  top: 20px;
  right: 20px;
  left: 20px;
  bottom: 20px;
  padding: 0;
  z-index: 12;
  height: calc(100vh - 40px);
}

#menu-contents {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#menu-pane-wrapper {
  display: flex;
  flex: 1;
  background-color: #eeffcc;
}

#menu-panes {
  flex: 1;
  display: flex;
}

.menu-pane {
  box-sizing: border-box;
  background-color: #ff0000;
  width: 20%;
  padding: 10px;
  display: flex;
}

.menu-pane-overflow {
  flex: 1;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: aqua;
}

.menu-item {
  padding: 5px;
}

<div id="menu">
  <div id="menu-contents">
    <div id="menu-header">HEADER</div>
    <div id="menu-pane-wrapper">
      <div id="menu-panes">
        <div class="menu-pane">
          <div class="menu-pane-overflow">
            <div class="menu-pane-scroll">
              <div class="menu-item">1</div>
              <div class="menu-item">2</div>
              <div class="menu-item">3</div>
              <div class="menu-item">4</div>
              <div class="menu-item">5</div>
              <div class="menu-item">6</div>
              <div class="menu-item">7</div>
              <div class="menu-item">8</div>
              <div class="menu-item">9</div>
              <div class="menu-item">10</div>
              <div class="menu-item">11</div>
              <div class="menu-item">12</div>
              <div class="menu-item">13</div>
              <div class="menu-item">14</div>
              <div class="menu-item">15</div>
              <div class="menu-item">16</div>
              <div class="menu-item">17</div>
              <div class="menu-item">18</div>
              <div class="menu-item">19</div>
              <div class="menu-item">20</div>
              <div class="menu-item">21</div>
              <div class="menu-item">22</div>
              <div class="menu-item">23</div>
              <div class="menu-item">24</div>
              <div class="menu-item">25</div>
              <div class="menu-item">26</div>
              <div class="menu-item">27</div>
              <div class="menu-item">28</div>
              <div class="menu-item">29</div>
              <div class="menu-item">30</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

How to use flexbox inside a fixed container?

1 Answers1