CSS - 高度：calc（100％ - Nem）在flex内部时不起作用

Question

我有三排：固定，流动，固定。这三行在一起是100％高度，并且必须始终在页面上可见而不滚动。在流体排中，我有一个必须占据100％高度的模块。除了在模块中我需要使用overflow：auto。 这是我的代码：

＆＃13;

＆＃13;

    * {
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
      padding:0;
      margin:0;
    }
    
    .flexbox-parent
    {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
    }
    
    .flexbox-item-grow
    {
        flex: 1;
    }
    
    .fill-area
    {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch; 
        align-content: stretch;
        
    }
    
    div.module {
       width:100%;
       height:100%;
       background-color:yellow;
    }
    
    div.scrolling {
        height:calc(100% - 4em);
        overflow:auto;
    }
    
    div.header, div.footer {
      height: 2em;
      background:cyan;
    }

＆＃13;

    <div class="flexbox-parent">
        <div>
            TOP
        </div>
        <div class="fill-area flexbox-item-grow">
            <div class="flexbox-item-grow">
    			<div class="module">
    				<div class="header"></div>
    				<div class="scrolling">
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				    <p> Some Text</p>
    				</div>
    				<div class="footer"></div>
    			</div>
            </div>
        </div>
        <div>
            BOTTOM
        </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

这是fiddle。请知道，帮助我解决这个问题。

Answer 1

您可以在滚动元素上使用overflow: auto，但您还需要在之前的父元素上添加overflow: hidden，并且还需要使用flex: 1。

＆＃13;

＆＃13;

* {
  /* So 100% means 100% */
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.flexbox-parent {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.flexbox-item-grow, .module{
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
}

.scrolling {
  overflow-y: auto;
  background: yellow;
  flex: 1;
}
.header,
.footer {
  background: cyan;
  height: 2em;
}

＆＃13;

<div class="flexbox-parent">
  <div>
    TOP
  </div>
  <div class="fill-area flexbox-item-grow">
    <div class="flexbox-item-grow">
      <div class="module">
        <div class="header"></div>
        <div class="scrolling">
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
          <p> Some Text</p>
        </div>
        <div class="footer"></div>
      </div>
    </div>
  </div>
  <div>
    BOTTOM
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;