css - Modal window content scroll without height hardcode -

we have modal window, has header, body , footer. restrict window max height 100vh.

when content become large, want add scroll bars content only, not whole window (when scroll header , buttons should fixed).

there uggly solution this:

.content {     // 210 = header + footer height     max-height: calc(100vh - 210px);     overflow-y: auto; } 

there hardcode header , footer height , not nice. header or footer can change , break layout, until fix 210 new calculated value.

i hoped, flex can solve this, looks ie breaks all: flexbox children overflow parent max-height specified on ie

does solved problem without hacks , hardcode in 2017?

tested in ie 11, works fine:

* {    box-sizing: border-box;  }    html, body{    margin: 0;    height: 100vh;    font-family: open sans;  }    body {    padding: 10px;  }    .modal {    border: 10px solid #333;    height: 100%;    position: relative;    display: flex;    flex-direction: column;  }    .modal-header, .modal-footer, .modal-content {    padding: 10px 20px;  }    .modal-header {    border-bottom: 5px solid #333;  }    .modal-header h1 {    margin: 0 auto;  }    .modal-footer {    margin-top: auto;    border-top: 5px solid #333;  }    .modal-content {    flex: 1;    overflow-y: scroll;  }    .modal-footer button {    border: 3px solid green;    font-size: 24px;    background-color: lightgreen;    cursor: pointer;    transition: 0.2s;  }    .modal-footer button:hover {    background-color: lightblue;    border-color: blue;  }

<div class='modal'>    <div class='modal-header'>      <h1 class='centered'>header</h1>    </div>    <div class='modal-content'>      <p>        lorem ipsum dolor sit amet, consectetur adipiscing elit. mauris scelerisque aliquet purus, nec auctor odio scelerisque in. aliquam nec ipsum molestie, accumsan nulla id, malesuada neque. nam non aliquet ipsum. donec laoreet tristique quam, sit amet sodales        neque condimentum eget. integer placerat est tellus. curabitur fringilla nisi justo, ut rhoncus sem auctor sit amet. morbi sed orci mattis, fermentum velit lobortis, faucibus elit. cras in elementum nisi, ut mollis nunc. suspendisse ultrices et        tortor non laoreet. etiam placerat nisl neque consequat, ut cursus lorem ornare.      </p>      <p>        sed lobortis rutrum rutrum. phasellus vestibulum nec magna eget rutrum. morbi sed faucibus libero. sed @ ullamcorper eros. cras sed vestibulum est, non convallis lorem. cras eget ante pharetra, mattis risus sed, feugiat ipsum. nullam magna augue, iaculis        sed tincidunt vitae, elementum eget massa.      </p>      <p>        mauris tempor viverra nulla vel dictum. vivamus finibus dignissim augue blandit lobortis. ut in nisl placerat, vehicula neque a, fringilla diam. quisque tempor semper mi sed dapibus. nullam condimentum, odio nec tincidunt dignissim, tortor urna mollis        sem, ut laoreet libero ligula id tellus. morbi nisl @ nibh eleifend luctus nec nec velit. ut vitae molestie nulla, @ fringilla ex. curabitur vel justo ornare, varius sapien eu, iaculis magna.      </p>      <p>        suspendisse in nisi id ligula convallis rhoncus non ut justo. aliquam magna eros, faucibus vel lorem ut, aliquam euismod odio. morbi sagittis venenatis libero, non vulputate dui ullamcorper vitae. vivamus in feugiat tortor. sed nec massa condimentum,        fermentum sapien mattis, sodales dolor. donec egestas facilisis nisl, sed tempor libero elementum quis. duis bibendum diam erat dignissim consectetur in sit amet ex. etiam tristique, tortor eu efficitur fermentum, mauris quam rhoncus diam, in        imperdiet est justo ut neque. sed facilisis felis metus, sed efficitur urna tincidunt id. ut vel egestas neque. pellentesque lacinia malesuada quam condimentum porttitor.      </p>      <p>        sed in venenatis ante. suspendisse suscipit ex vitae purus tristique vulputate sed ut lorem. nulla facilisi. mauris sed ex @ sem aliquet ultrices. vestibulum ac lobortis ex, @ finibus ipsum. aliquam erat volutpat. phasellus magna dolor, pellentesque        vel elit et, blandit pulvinar purus. proin eget accumsan diam. aenean scelerisque commodo tempus.      </p>      <p>        integer sagittis quam nibh, sed lobortis ex vulputate sit amet. aenean vel mauris vitae ex fermentum consectetur. aliquam fringilla ipsum. nunc molestie dui ac risus congue vestibulum. nunc eleifend, dui eu dictum congue, augue odio molestie elit, feugiat        interdum purus erat eget libero. nunc vitae rhoncus velit. nunc sit amet odio eleifend, iaculis tortor sed, aliquam purus. cras placerat placerat facilisis. mauris et neque non ante consequat semper. pellentesque eu enim sed nisl lacinia facilisis.      </p>      <p>        ut id dui mattis, tristique lacus in, euismod felis. sed blandit commodo euismod. proin tincidunt odio tellus, sed euismod purus finibus et. proin congue dui @ enim imperdiet, id volutpat ipsum commodo. maecenas suscipit id nisl sed porttitor. morbi        bibendum nulla vel dui convallis, @ mattis leo finibus. mauris ornare, enim vitae fermentum pretium, felis ante sollicitudin massa, in hendrerit eros nisi ac est. nullam urna magna, fringilla ac arcu at, elementum eleifend quam. donec lacinia aliquet        sem ut tempus. quisque mattis gravida elit nec pulvinar. phasellus tincidunt lectus eget ante dapibus posuere. quisque mollis tincidunt enim, quis congue ex porta eu. in sit amet felis in elit lacinia consectetur vitae vitae augue. curabitur tellus        nisi, aliquam venenatis tortor at, laoreet placerat orci. etiam vel cursus elit.      </p>      <p>        mauris fermentum porta fermentum. vivamus rutrum ipsum sit amet sollicitudin euismod. integer non elit nulla. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. sed in dui id ipsum volutpat rutrum. duis odio nisl,        cursus dignissim efficitur nec, suscipit vel sem. nunc fermentum consequat metus, in tincidunt nulla pretium quis. orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. quisque rutrum iaculis leo et malesuada. duis        aliquet, libero vitae finibus euismod, odio odio lacinia eros, ac viverra ante massa sit amet felis. suspendisse scelerisque tincidunt odio, eget egestas tortor ultrices at.      </p>    </div>    <div class='modal-footer'>      <button>footer button</button>    </div>  </div>