Doctype breaks flexbox layout [duplicate]

落花浮王杯 提交于 2020-06-23 06:00:11

问题


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

What it should look like:


回答1:


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:

  • Working with the CSS height property and percentage values

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 property, percentage values & DOCTYPE


来源:https://stackoverflow.com/questions/35510740/doctype-breaks-flexbox-layout

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!