* {
box-sizing: border-box;
}
.modal-wrapper {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
overflow-y: auto;
}
.modal {
margin: 30px auto;
position: relative;
max-height: 100%;
background-color: #ccc;
}
.modal-content {
position: relative;
max-height: 100%;
}
.modal-header {
position: absolute;
height: 65px;
background-color: red;
top: 0;
left: 0;
right: 0;
}
.modal-body {
max-height: 100%;
background-color: green;
padding: 80px 15px 80px 15px;
overflow-y: scroll;
}
.modal-footer {
position: absolute;
height: 65px;
background-color: red;
bottom: 0;
left: 0;
right: 0;
}
<div class="modal-wrapper">
<div class="modal">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet commodi delectus deleniti eaque error esse illo inventore iusto maxime minus odit optio saepe, tenetur ullam vitae. A cupiditate impedit modi mollitia. Ab, beatae deleniti dolorum est
fugiat fugit ipsa necessitatibus non, numquam perferendis porro provident quod repellat saepe, sint ut voluptas? Accusantium animi aperiam consequuntur debitis dignissimos ducimus eaque earum, eius ex illum in ipsum itaque laborum magni minus
natus nihil non obcaecati odit optio, porro possimus quidem quo recusandae repellat saepe sequi temporibus tenetur velit veniam. Beatae dolorem eligendi esse magnam minima reiciendis sapiente, soluta. Commodi earum, exercitationem fugiat laudantium
quia ratione sint totam vel veniam vitae. Assumenda commodi cupiditate eum, iure iusto labore laborum quo quos reiciendis veniam. Ab atque consequatur cumque ducimus explicabo ipsam necessitatibus nulla quidem? Accusantium adipisci atque autem
cumque deleniti dolorem dolores ea earum eos est et illum in iure iusto, molestiae nesciunt nulla omnis, pariatur placeat quas quasi quos ratione recusandae sequi sit tempore totam vel vitae voluptate voluptatibus! Ad aliquam esse harum illo,
laborum quam quia sunt. Aperiam culpa delectus quasi quidem reprehenderit repudiandae voluptates voluptatibus. Ab ad, asperiores aspernatur at atque dolores ducimus expedita ipsum labore laboriosam magni maiores nostrum numquam ratione rem, reprehenderit
suscipit tenetur ullam, veritatis voluptates. At consequatur dolore esse molestiae, neque odit placeat! Accusantium adipisci alias, architecto aspernatur beatae consectetur corporis deserunt ea fugiat impedit ipsa iste iure labore libero molestias
nulla odio officiis perferendis perspiciatis provident quas quibusdam reiciendis sapiente sit ullam vel, velit, voluptatem. A animi consequuntur culpa, cumque cupiditate debitis delectus deleniti iure laborum non obcaecati praesentium reprehenderit
sapiente similique voluptatum. Alias animi architecto, asperiores aspernatur autem delectus dolore dolores, eaque eligendi enim est eveniet facere, inventore itaque minus modi placeat porro quas quia quisquam sapiente temporibus totam. Amet assumenda
aut blanditiis commodi culpa dolore est eum ex harum, hic id laborum libero minus neque optio praesentium provident quasi sapiente voluptate voluptatem. Deserunt, illo impedit modi nihil nulla perspiciatis quaerat quidem quisquam reiciendis tenetur
veritatis vitae. Atque, ducimus, quidem. Atque debitis delectus dicta dolor dolore dolorum eius error excepturi facere harum in, ipsum natus necessitatibus nesciunt numquam odit optio pariatur reprehenderit voluptas voluptate. Ad dolore dolorum
in iste pariatur quos voluptas? Adipisci aliquid aspernatur doloribus ea eligendi enim error fugit iste laboriosam maiores, natus nesciunt odit perspiciatis reprehenderit soluta tempore vel. A ad aliquam aliquid doloremque dolorum ipsam maiores
nihil nulla! Aperiam asperiores cum debitis dicta ducimus ea eaque earum eligendi, exercitationem ipsum iste, nemo, neque nihil officia optio praesentium provident quae quasi quisquam reprehenderit rerum saepe totam ut veniam voluptate. Accusantium,
consectetur cum dicta dolores ea et harum illo inventore ipsam nostrum quis quisquam sit velit veritatis voluptatem. A ad aliquid consequatur consequuntur culpa delectus dignissimos dolorem eveniet facere harum illum ipsa molestiae molestias,
quas saepe sint voluptas voluptatum? Adipisci architecto autem consequatur deserunt, dolorum eos ipsam laboriosam necessitatibus nemo nihil nisi, odio officiis pariatur quae ratione, vitae voluptatibus! Corporis ea totam veniam! Autem beatae ducimus
ex exercitationem, fugiat fugit quod reiciendis sapiente.
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
Суть в чем - есть модальное окно, модальное окно может быть не более 100% по высоте. В модальном окне есть фиксированная по высоте шапка и футер. Контент по высоте динамичный, в случае переполнения по высоте - появляется скролл. В чем нынешняя проблема - блок с классом modal-content по высоте больше 100% от modal, хотя указано свойство max-height: 100%. С чем это может быть связано и как решить проблему?