Div高度适用于Firefox，但不适用于chrome

Question

我在Firefox和Chrome之间存在视觉问题而且我不知道为什么，我尝试了一些东西，但它在firefox中工作得很好，但文章的高度尺寸不能像我预期的那样工作：

	*{
		border: 0px;
		margin: 0px;
		padding: 0px;
	}
	body, html{
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	#main {
	   height: 80%;
	   display: -webkit-flex;
	   display:         flex;
	   flex-flow: row;
	}
	#main section {
		background: #CFC;
		flex: 3 1 60%;
		order: 2;
	}
	#main nav {
		background: #CCF;
		flex: 1 6 20%;
		order: 1;
	}
	#main aside {
		background: #CCF;
		flex: 1 6 20%;
		order: 3;
	}
	header, footer {
		display: block;
		min-height: 10%;
		background: #FC6;
	}
	#header, #footer {
		display: block;
		min-height: 10%;
		background: #CCC;
	}
	#article{
		display: block;
		height:80%;
	}
	#content{
		height:100%;
		width: 100%;
		background: #FFF;
	}

		<header>&lt;header&gt;
		</header>
		<div id="main">
			<nav>&lt;nav&gt;
			</nav>
			<section>
				<div id="content">
					<div id="header">&lt;header&gt;
					</div>
					<div id="article">&lt;article&gt;
					</div>
					<div id="footer">&lt;footer&gt;
					</div>
				</div>
			</section>
			<aside>&lt;aside&gt;
			</aside>
		</div>
		<footer>&lt;footer&gt;
		</footer>

Answer 1

只需将height:100%添加到#main section，就像这样：

＆＃13;

＆＃13;

    *{
		border: 0px;
		margin: 0px;
		padding: 0px;
	}
	body, html{
		height: 100%;
		width: 100%;
		margin: 0px;
		padding: 0px;
	}
	#main {
	   height: 80%;
	   display: -webkit-flex;
	   display:         flex;
	   flex-flow: row;
	}
	#main section {
		background: #CFC;
		flex: 3 1 60%;
		order: 2;
		height:100%;
	}
	#main nav {
		background: #CCF;
		flex: 1 6 20%;
		order: 1;
	}
	#main aside {
		background: #CCF;
		flex: 1 6 20%;
		order: 3;
	}
	header, footer {
		display: block;
		min-height: 10%;
		background: #FC6;
	}
	#header, #footer {
		display: block;
		min-height: 10%;
		background: #CCC;
	}
	#article{
		display: block;
		height:80%;
	}
	#content{
		height:100%;
		width: 100%;
		background: #FFF;
	}

＆＃13;

		<header>&lt;header&gt;
		</header>
		<div id="main">
			<nav>&lt;nav&gt;
			</nav>
			<section>
				<div id="content">
					<div id="header">&lt;header&gt;
					</div>
					<div id="article">&lt;article&gt;
					</div>
					<div id="footer">&lt;footer&gt;
					</div>
				</div>
			</section>
			<aside>&lt;aside&gt;
			</aside>
		</div>
		<footer>&lt;footer&gt;
		</footer>

＆＃13;

＆＃13;

＆＃13;