css flexbox IE11 flex项目内容突破容器

Question

管理以在Firefox，Chrome，Edge，Opera中使用Flexbox布局。

想在IE11上做这个工作，或者肯定知道它是不可能的。

我已经阅读了IE11问题并尝试在容器上设置高度100％，但没有成功。 IE11内容垂直溢出除body之外的所有容器。

 html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { display: flex; flex-direction: column; } .header, .footer { height: 2em; flex: none; background-color: orange; } .content-wrapper { flex: 1 0 auto; width: 100%; background-color: white; display: flex; flex-direction: column; } .content { flex: 1; width: 100%; max-width: 60em; margin: 0 auto; display: flex; flex-direction: row; background-color: red; } .main { flex: 1; padding: 1em 1em 0; min-width: 12em; display: flex; flex-direction: column; background-color: blue; } .main-body { flex: 1 0; background-color: yellow; } .main-toc { order: -1; background-color: green; } .nav { order: -1; flex: 0 0 auto; width: 12em; } pre { position: relative; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0.3em; max-width: 100%; background-color: silver; } 

 <header class="header"> header </header> <div class="content-wrapper"> <div class="content"> <main id="main" role="main" class="main"> <div id="main-body" class="main-body"> <h1>H1</h1> <p><a href="#">link</a> </p> <p>On the other hand, we denounce with righteous indignation ...</p> <pre><code class="language-php"> public function publicMethodOptionalParam($p1 = null) { return true; } </code></pre> <p>On the other hand, we denounce with righteous indignation ...</p> </div> <div id="main-toc" class="main-toc"> table of contents </div> </main> <nav id="nav" role="navigation" class="nav"> <ul> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> <li class="is-active">Getting Started <ul> <li class="is-active"><a href="/getting-started/introduction/">Introduction</a> </li> </ul> </li> </ul> </nav> </div> </div> <footer class="footer"> footer </footer> 

Codepen与上面的代码

Answer 1

添加flex: 1 0 auto; 到.content （在css中）。

见Codepen 。

来自michaPau的评论。 代表他这样做，所以这个问题可以解决，因为他没有反应，并且解决方案对于寻找它的人来说更容易/更明确。