javascript - CSS grid + flex显示子项重叠元素IE11

Question

我在下面的示例中显示了一个网格系统，其中网格的“主要”部分有一个只属于它的页脚，应该显示在最底部。

|--------------|
|    header    |
|--------------|
|   |      |   |
| L | Main | R |
|   |      |   |
----------------

我知道当grid-template-rows: 64px calc(100% - 64px);应用时，具有 L、Main 和 R 的底行将扩展以填充(100% - 64px)其父级。

现在我想在那个Main网格单元格中添加内容，有时会溢出，有时不会；所以我添加overflow: auto;以使滚动在Main级别上工作。

我现在需要内部的页脚Main始终位于底部，所以我使用display: flex;同一个项目，这样我就可以正确地分发它的内容。

这就是麻烦开始的地方，我不确定这是否是由计算给出的高度grid-template-rows和由其内容给出的实际高度引起的冲突，这使得该display flex子项与上面的元素重叠，如下图所示。

我不能只将 Main 更改为显示块，因为那时它内部的页脚不会一直拉到底部。

这在 Chrome 上运行良好，在 IE 上失败（惊喜），这是一个工作小提琴，可用于重新创建问题并查看两个浏览器上的差异。

*{
  box-sizing: border-box;
}
html, body{
  height: 100%;
  background-color: gray;
}

.outer-content{
      align-content: start;
    display: grid;
    display: -ms-grid;
    grid-template-columns: 260px auto 320px;
    -ms-grid-columns: 260px calc(100% - 566px) 320px;
    grid-template-rows: 64px calc(100% - 64px);
    -ms-grid-rows: 64px calc(100% - 64px);
    grid-template-areas: "header header header" "leftbar main rightbar";
    height: 100%;
}
main{
  display: flex;
  flex-direction: column;
  grid-area: main;
  overflow: auto;
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  background-color: pink;
}
.footer{
    background-color: #222326;
    font-family: "Open Sans",sans-serif;
    margin-top: auto;
    min-width: 400px;
    padding: 10px 0;
    position: relative;
    display: block;
    color: white;
    text-align: center;
}
.static{
    color: #fff;
    padding: 10px 10px 10px 40px;
    font-family: "Open Sans",sans-serif;
    font-size: .8rem;
}

<div class="outer-content">
  <main>
    <div class="static">
    <p>Accumsan aenean voluptas? Litora in quisquam, dis, maxime! Facilisi quasi, facere. Commodi quisque tempus, elementum laborum? Cras euismod porta quae.</p>

<p>Dolore natoque netus ipsam, in harum dolores primis, mi, scelerisque accusantium imperdiet incididunt ea sociosqu nemo montes, augue vulputate officiis.</p>

<p>Velit repellat amet! Feugiat aptent deleniti velit maiores officia ullam hac cupiditate ex, cum vel sociis, iure auctor, proident orci.</p>

<p>Primis, ac nonummy sociis do leo est modi natoque tellus exercitation scelerisque! Cubilia dis placeat diamlorem pulvinar accusamus? Fusce, culpa.</p>

<p>Sodales quis modi voluptas rem vulputate accumsan, excepturi ducimus nascetur eligendi! Debitis? Dolorum vitae eveniet ducimus esse habitasse, minima tempora.</p>

<p>Repellat risus non ut earum totam similique quisque anim, risus. Pretium. Gravida, assumenda pellentesque non excepteur! Parturient vel sociis, ullam.</p>

<p>Cupidatat laboriosam tempus similique corporis recusandae occaecat fames aut ipsa tristique dolores, dolorum imperdiet excepturi, torquent quod? Lacus? Fringilla? Vivamus.</p>

<p>Aliquip sapiente lectus mollis labore augue molestiae alias purus praesent corrupti tempora, quos, sed, perspiciatis phasellus parturient? Vel, quas reiciendis.</p>

<p>Reprehenderit quis. Nibh lacinia iste quasi quam laboriosam, adipisci reiciendis mollit? Ante proin ex montes, rem posuere dictum, lectus, varius.</p>

<p>At quae arcu dignissimos id ea quidem, euismod aenean, reiciendis sit. Architecto justo iste turpis totam euismod mattis, lectus explicabo.</p>

<p>Dignissimos nunc maiores malesuada, nemo. Inventore minima rhoncus? In nesciunt aptent dolore elementum, do. Tenetur mus! Tristique ad pariatur provident.</p>

<p>Fermentum excepturi. Quas, nostrum! Elementum iste! Varius bibendum, ullamco vestibulum neque ornare, magnam! Mattis? Iste convallis fringilla totam diam fugiat.</p>

<p>Ac tempus ipsam quis faucibus? Provident condimentum, vehicula dis? Egestas. Beatae facere taciti illo, praesent cursus soluta dolor excepteur ipsa.</p>

<p>Alias blandit lorem massa impedit taciti, platea omnis pede, diamlorem, cursus quaerat! Orci penatibus, tempore quos egestas nemo, excepteur ipsa.</p>

<p>Temporibus litora nostrud, risus laboriosam. Praesent. Velit perferendis? Nihil, blandit optio ultrices, eiusmod! Repellat rutrum nostra, delectus non neque sem.</p>

<p>Asperiores quaerat tellus natoque ipsam tincidunt duis consequat. Id? Assumenda iaculis excepteur magnis ipsum ullam. Saepe urna diam? Veniam libero.</p>

<p>Facilis dapibus doloremque curabitur hic erat? Placerat explicabo anim recusandae facilis? Sunt, aptent, ultrices occaecat fringilla totam tempor error nullam.</p>

<p>Neque autem rutrum molestias. Natoque sint integer imperdiet, phasellus, fuga auctor lobortis reprehenderit sagittis aliquip iaculis felis tempora, maiores ducimus.</p>

<p>Sint, diamlorem anim cupidatat. Sem nulla! Facere quo, nulla illo felis commodi scelerisque nunc tristique? Consequatur ipsa ullamcorper, veniam sem.</p>

<p>Sociis auctor? Feugiat, wisi. Condimentum, unde aliquid doloribus. Aspernatur, cillum leo dignissimos facilisi gravida impedit repellendus, ullamco, labore quia vitae.</p>

<p>Nisi quasi, error pulvinar. Cum corrupti risus, voluptatibus taciti expedita eget magnis euismod deleniti, culpa tempor magna quia hendrerit hic.</p>

<p>Esse mus, repellendus ipsa anim sagittis dolor rem? Sunt in lorem, elementum nostrud placerat autem, totam, sapiente magna, laoreet, culpa.</p>

<p>Hic? Autem tempor egestas fugit pellentesque nihil et veniam posuere, mi rem consectetuer auctor asperiores ullamco massa exercitation? Doloremque non.</p>

<p>Duis eius, nunc anim iste purus, sagittis leo diam expedita habitant laboriosam! Eros expedita habitasse. Adipisicing. Mus consectetuer! Praesentium? Itaque.</p>

<p>Eligendi porttitor sem hymenaeos tristique. Nostrud lacus ducimus minim, praesentium dolor beatae sit occaecat dignissimos, natus architecto feugiat felis, mollitia.</p>

<p>Quis cupidatat, aliquet? Quo aut maxime similique possimus gravida luctus nisi repudiandae? Feugiat proin voluptates dis quod lacinia donec a.</p>

<p>Sunt dolorem hac ea? Ullamco cubilia, distinctio facilis ipsam est voluptates? Quasi, soluta vivamus eaque, condimentum, dapibus sollicitudin, commodo? At.</p>

<p>Error voluptas mollitia, repudiandae aut egestas. Fringilla culpa tenetur, posuere! Voluptas quo sed mollis cupidatat, unde, dolorem ipsam vulputate, esse.</p>

<p>Egestas ad deserunt eiusmod rhoncus distinctio quisque nonummy, torquent autem! In potenti inceptos mattis nisl, ligula harum sint laoreet tellus.</p>

<p>Molestias vel cursus, tristique? Aenean temporibus wisi quo habitant laoreet nec odio! Velit quisquam sapien! Nonummy, repellendus suscipit. Aute rem.</p>

<p>Dapibus odit molestiae nisl eveniet? Quisquam enim doloribus in. Mollitia aliquam iaculis, conubia laoreet wisi reiciendis mauris dapibus error! Occaecati.</p>

<p>Expedita exercitationem, ante sodales molestie at, hymenaeos sequi alias torquent aute, natus? Integer fusce delectus? Maecenas laboriosam rem unde varius.</p>

<p>Nostra fusce illum hymenaeos laboris odit lorem curae, inventore mi voluptatibus vivamus, alias aspernatur vulputate, tenetur, molestias conubia, ac scelerisque.</p>

<p>Nihil, ullamcorper facilisis cupiditate proident dolor! Optio irure. Blandit, ultricies porttitor, maiores. Nostrud nostrud, error fringilla, voluptatum laudantium, dolor omnis.</p>

<p>Temporibus nesciunt maiores culpa delectus incidunt omnis expedita. Provident incididunt proident temporibus, per necessitatibus, pariatur class, neque quisque, nemo iste.</p>

<p>Placeat cupiditate mus, animi! Perspiciatis mauris voluptatibus nisl, aspernatur ex nobis dolor ac ultrices corrupti? Fugiat? Mi incidunt inventore pharetra.</p>

<p>Sint! Ducimus ut earum? Fugiat porttitor nec, at lacus cubilia, ultricies ipsa animi, metus semper occaecat cumque, molestiae ab, laudantium.</p>

<p>Enim irure ipsum eveniet ipsam, enim, modi arcu? Quasi nonummy autem perspiciatis! Arcu rhoncus consequuntur hendrerit purus congue fuga. Metus.</p>

<p>Dolorum vehicula error quibusdam inventore convallis lobortis praesent omnis? Earum luctus facilisis laoreet mollit commodi autem? Commodo eos culpa distinctio.</p>

<p>Est ultricies nisi porro animi voluptate, molestiae! Ipsam occaecati, fringilla diamlorem tincidunt, proident! Pede senectus, iaculis morbi nisi cillum, illo.</p>

<p>Voluptatibus maiores debitis fames eum ullamco? Scelerisque modi quam voluptatibus expedita, officia irure vehicula diam diam voluptatibus maiores? Inventore montes.</p>

<p>Atque provident illum, accumsan in pretium sociis laudantium id optio lobortis dignissimos, tempor vivamus, euismod blanditiis quisque taciti adipisci! Magnam.</p>

<p>Sagittis adipisicing ultrices reprehenderit. Quaerat, alias voluptate tempora, sagittis! Euismod. Laoreet, quae repellat nascetur ut quia voluptatum labore! Felis dignissimos.</p>

<p>Fugit conubia sodales, curae condimentum, elit, aptent hendrerit platea. Itaque class vero, voluptatibus posuere fermentum ab aspernatur montes, magnis! Ullamco.</p>

<p>Hac inventore dignissim venenatis aliquid eleifend minim tincidunt. Amet, aperiam dignissimos libero, dolores expedita. Laboriosam quisque penatibus, assumenda, tellus, maiores.</p>

<p>Donec. Dignissim vestibulum platea assumenda a ligula tortor, consequuntur donec molestie nascetur voluptatibus dolorem minima cursus quam tempore commodi maecenas.</p>

<p>Sem veritatis sequi purus? Ratione nulla phasellus, animi. Anim ratione assumenda debitis laudantium quisquam quibusdam elit morbi malesuada tincidunt potenti.</p>

<p>Eros illo varius. Occaecati curabitur nostrud, fames voluptatum? Accumsan, quasi ac, molestias excepturi nonummy, expedita fuga aliqua varius a gravida.</p>

<p>Senectus semper! Alias possimus accusamus rem quisque dictum auctor praesent eligendi inventore? Tortor labore feugiat, in, sint quis auctor. Repellat.</p>

<p>Diam litora? Cupidatat exercitationem vero earum cursus esse proin mattis animi eveniet, volutpat etiam justo hic senectus vivamus, ducimus minus.</p>
    </div>
    <div class="footer">
    I SHOULD BE AT THE VERY BOTTOM
    </div>
  </main>
</div>

标签： javascripthtmlcssflexbox