Doctype打破了Flexbox的布局 [英] Doctype breaks flexbox layout

问题描述

当我在页面顶部添加声明时，我的flexbox布局将折叠，而当我删除文档类型时，它会按预期工作.问题发生在chrome/firefox/ie.

When I add the declaration at the top of my page my flexbox layout will collapse, when I remove the doctype it works as expected. Problem occurs in chrome/firefox/ie.

.grid {
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  flex-grow: 1;
  border: 1px solid black;
}
.row {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  flex-grow: 1;
}
.cell {
  flex-grow: 1;
  border: 1px solid black;
}

<div class="grid">
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="row">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
</div>

https://plnkr.co/edit/jKklf2zeYBjOgTsSQNvr

它应该是什么样的

推荐答案

包括doctype并将其添加到CSS:

Include the doctype and add this to your CSS:

html, body { height: 100%; }

使用百分比高度时，必须为所有父元素(包括根元素)指定一个高度.在此处阅读更多信息:

When using percentage heights, you must specify a height for all parent elements up to and including the root element. Read more here:

• 使用CSS height属性和百分比值

当您移除文档类型时，浏览器进入怪异模式，并在父级的高度为auto时解析元素相对于视口的高度百分比 .在此处阅读更多信息:

When you remove the doctype the browser enters quirks mode and resolves an element's percentage height relative to the viewport when the parent's height is auto. Read more here:

• CSS height属性，百分比值和DOCTYPE

这篇关于Doctype打破了Flexbox的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！