html - css，嵌套 flexbox 的高度在 Chrome 中不正确

Question

我尝试使用嵌套的 flexbox 来创建基本布局。布局在 IE 11 中看起来不错，但嵌套 flexbox 的高度未在 Chrome 中设置。

我这里有一个例子http://jsfiddle.net/jkristia/bL4pyg4b/3/

要在 Chrome 上运行我缺少什么？

<div>
    <!-- header outside flex box -->
    <header class="titlebar">
        <div class="left">This is the left box</div>
        <div class="center">This text is centered in the middle box</div>
        <div class="right">Right box</div>
    </header>
    <!-- flex box -->
    <section class="flexContainer">
        <!-- row using inner flex box -->
        <div class="flexRow">
            <div class="flexContainer02">
                <div class="left">left</div>
                <div class="center">
                    <div class="flexContainer03">
                        <div class="top">center of this div.
                            <br />top</div>
                        <div class="bottom">bottom</div>
                    </div>
                </div>
                <div class="right">right</div>
            </div>
        </div>
        <div class="footer">row 3, this is the footer</div>
    </section>
</div>

和CSS

html, body {
    background-color: wheat;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.titlebar {
    height: 40px;
    background-color: #ec7fed;
    display: flex;
    flex-direction: row;
}
.titlebar .left {
    border: dashed;
    border-color: white;
    border-width: 1px;
    background-color: #78c6f3;
    /* 
        below is to vertically center the text.
        Set the line height to height of parent element - any padding
    */
    line-height: calc(40px - (5px + 5px));
    padding: 5px;
    margin-left: 10px;
    margin-right: 10px;
}
.titlebar .center {
    background-color: lightgreen;
    text-align: center;
    /* flexgrow allows for the box to take the remaining space in the flax container*/
    flex-grow: 1;
}
.titlebar .right {
    background-color: lightblue;
    margin: 10px;
}
.flexContainer {
    position: absolute;
    width: 100%;
    height: calc(100% - 40px);
    flex-basis: calc(100% - 40px);    
    background-color: #d58d28;
    flex-direction: column;
    display: flex;
}
.flexRow {
    margin:5px;
    flex: 1 100%;
    border: dashed;
    border-color: white;
    border-width: 1px;
    background-color: lightcoral;
}
.flexContainer02 {
    margin: 5px;
    flex-direction: row;
    background-color: lightgray;
    display: flex;
    width: calc(100% - 10px);
    height:calc(100% - 10px);
    flex-basis: 100%;
}
/* apply the following to all immediate children of flexContainer02*/
 .flexContainer02 > * {
    margin: 4px;
    text-align: center;
    border: dashed;
    border-color: white;
    border-width:1px;
}
.flexContainer02 .left {
    flex: 0 200px;
    background-color: #78c6f3;
}
.flexContainer02 .center {
    flex: 1 200px;
    background-color: #78c6f3;
}
.flexContainer02 .right {
    flex: 0 100px;
    background-color: #9fe1fa
}
/* apply the following to all immediate children of flexContainer03*/
 .flexContainer03 {
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    background-color: #86dcc2;
}
.flexContainer03 > * {
    margin: 4px;
    text-align: center;
    border: solid;
    border-color: darkgrey;
    border-width:1px;
}
.flexContainer03 .top {
    flex: 0 50px;
    background-color: #00ff90;
    overflow:hidden;
}
.flexContainer03 .bottom {
    flex: 1;
    background-color: #cbcc80;
}
.footer {
    background-color: #cbce83;
    border: solid;
    font-size:12px;
    text-align:right;
    border-color: darkgray;
    border-width: 1px;
    margin: 0px;
    padding: 0px;
    /* for static height set both grow and shrink */
    flex-grow: 0;
    flex-shrink: 0;
    height:30px;
}

Answer 1

一位同事在这个代码笔中找到了解决方案 http://codepen.io/JosephSilber/pen/HqgAz

问题是每个子容器都有一个额外的“div”。解决方案是通过设置 display: flex 将 flex 元素标记为新容器。

我已经修复了我的 jsfiddler 示例 http://jsfiddle.net/jkristia/bL4pyg4b/4/

html, body {
	background-color: wheat;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

.titlebar {
	height: 40px;
	background-color: #ec7fed;
	display: flex;
	flex-direction: row;
}

	.titlebar .left {
		border: dashed;
		border-color: white;
		border-width: 1px;
		background-color: #78c6f3;
		/* 
		below is to vertically center the text.
		Set the line height to height of parent element - any padding
	*/
		line-height: calc(40px - (5px + 5px));
		padding: 5px;
		margin-left: 10px;
		margin-right: 10px;
	}

	.titlebar .center {
		background-color: lightgreen;
		text-align: center;
		/* flexgrow allows for the box to take the remaining space in the flax container*/
		flex-grow: 1;
	}

	.titlebar .right {
		background-color: lightblue;
		margin: 10px;
	}

.flexContainer {
	position: absolute;
	width: 100%;
	height: calc(100% - 40px);
	background-color: #d58d28;
	flex-direction: column;
	display: flex;
}

.flexRow {
	flex: 1;
    display: flex;
    margin: 5px;
	flex-direction: row;
	background-color: lightgray;
	width: calc(100% - 10px);
	height: calc(100% - 10px);

	margin:5px;
	border: dashed;
	border-color: white;
	border-width: 1px;
}

/* apply the following to all immediate children of .flexRow*/
.flexRow > * {
	margin: 4px;
	text-align: center;
	border: dashed;
	border-color: white;
	border-width:1px;
}
.left {
	flex: 0 200px;
	background-color: #78c6f3;
}
.center {
    flex: 1;
    display: flex;
  	width: 100%;
	flex-direction: column;
	background-color: #86dcc2;
}
.right {
	flex: 0 100px;
	background-color: #9fe1fa
}

.center > * {
	margin: 4px;
	text-align: center;
	border: solid;
	border-color: darkgrey;
	border-width: 1px;
}
.center-top {
	flex: 0 40px;
	flex-grow: 0;
	flex-shrink: 0;
	background-color: #00ff90;
	overflow:hidden;
}
.center-bottom {
	flex-grow: 1;
	flex-shrink: 1;
	background-color: #cbcc80;
    overflow: auto;
	display: flex;
}

.footer {
	background-color: #cbce83;
	border: solid;
	font-size:12px;
	text-align:right;
	border-color: darkgray;
	border-width: 1px;
	margin: 0px;
	padding: 0px;
	/* for static height set both grow and shrink */
	flex-grow: 0;
	flex-shrink: 0;
	height:30px;
}

<div>
  <!-- header outside flex box -->
  <header class="titlebar">
    <div class="left">
      This is the left box
    </div>
    <div class="center">
      This text is centered in the middle box
    </div>
    <div class="right">
      Right box
    </div>
  </header>
  <!-- flex box -->
  <section class="flexContainer">

    <!-- row using inner flex box -->
    <div class="flexRow">
      <div class="left">
        left
      </div>
      <div class="center">
        <div class="center-top">
          center of this div.
          <br />top
        </div>
        <div class="center-bottom">
          bottom
        </div>
      </div>
      <div class="right">
        right
      </div>
    </div>

    <div class="footer">
      row 3, this is the footer
    </div>

  </section>


</div>