html - 浏览器支持另一个 flexbox 内的 Flexbox

我花了一整天的时间试图使这项工作发挥作用。
虽然我可以使用一个 flex box，但是当一个 flex box 包含另一个 flex box 时会变得很麻烦。

我试图遵循这个问题的提示:
Flexbox inside another flexbox?

它有点帮助，但不幸的是我仍然不在那里。

更令人困惑的是，Safari 和 Chrome 似乎显示完全不同的同一页面。这使得更难理解我做错了什么。

我想要做的是，有一个带有标题和内容的外部 flex 框。这个外部 flex 框应该在内容内部有另一个 flex 框，同样带有标题和内容。

看起来位于内部 flex 盒内容内部的表格不属于内部 flex 盒。

html {
    height: 100%;
}

body {
    margin: 0;
	min-height: 100%;
	height: 100%;
	overflow: hidden;
}

.outerFlexBox {
    height:100%;
    display: flex;
    display: -webkit-flex; /* for Safari */
    flex-direction: column;
    overflow: hidden;
    -webkit-flex-direction: column; /* for Safari */
    background-color: green;
    border: black dotted;
}

.outerHeader {
    border: blue dotted;
}

.outerContent {
    flex: 1;
    border: red dotted;
    overflow: hidden;
}

.innerFlexBox {
    height:100%;
    display: flex;
    display: -webkit-flex; /* for Safari */
    flex-direction: column;
    overflow: hidden;
    -webkit-flex-direction: column; /* for Safari */
    background-color: yellow;
    border: black solid;
}

.innerHeader {
    border: blue solid;
}

.innerContent {
	flex: 1;
    border: red solid;
    overflow: hidden;
}

.myTable {
	flex: 1;
	height: 100%;
	min-height: 100%;
	width: 100%;
	overflow-y: auto;
	border: grey solid;
}

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="index.css">
</head>
<body>
	<div class="container-fluid outerFlexBox">
    <div class="outerHeader">
        <h4>Some Outer Header</h4>
    </div>
    <div class="outerContent">
		<p>Some outer content</p>
		<div class="innerFlexBox">
		    <div class="innerHeader">
		    	<p>Some Inner Header</p>
		    </div>
		</div>
		<div class="innerContent">
			<p>Some inner content</p>
			<table class="myTable">
				<thead>
					<tr><th>Some Header Column</th></tr>
				</thead>
				<tbody>
					<tr><td>Some row</td></tr>
					<tr><td>Some row</td></tr>
					<tr><td>Some row</td></tr>
					<tr><td>Some row</td></tr>
					<tr><td>Some row</td></tr>
					<tr><td>Some row</td></tr>
				</tbody>
			</table>
		</div>
    </div>
</div>
</body>
</html>

这就是同一个页面在 Chrome(左)和 safari(右)上的样子。

html - 浏览器支持另一个 flexbox 内的 Flexbox-LMLPHP

最佳答案

当使用 Flexbox 并充分利用其属性时，将获得跨浏览器解决方案。

这里的主要部分是删除所有 height:100%; 并利用 Flebox 增长属性 flex-grow 。

此外，我制作了 outerContent 和 innerContent flex 容器，因此 Flebox 可以一直负责填充剩余空间。

注意，我已经在 Chrome/Firefox/IE11/Edge 上成功测试了这个

Fiddle demo

堆栈片段

html, body {
  margin: 0;
}

body {
  display: flex;             /*  IE11 fix  */
}

.outerFlexBox {
  flex: 1;                   /*  IE11 fix  */
  min-height: 100vh;

  display: -webkit-flex;
  /* for Safari */
  -webkit-flex-direction: column;
  /* for Safari */
  display: flex;
  flex-direction: column;
  background-color: green;
  border: black dotted;
}

.outerHeader {
  border: blue dotted;
}

.outerContent {
  flex-grow: 1;
  border: red dotted;
  display: -webkit-flex;
  /* for Safari */
  -webkit-flex-direction: column;
  /* for Safari */
  display: flex;
  flex-direction: column;
}

.innerFlexBox {
  flex-grow: 1;

  display: -webkit-flex;
  /* for Safari */
  -webkit-flex-direction: column;
  /* for Safari */
  display: flex;
  flex-direction: column;
  background-color: yellow;
  border: black solid;
}

.innerHeader {
  border: blue solid;
}

.innerContent {
  flex-grow: 1;
  border: red solid;
  display: -webkit-flex;
  /* for Safari */
  -webkit-flex-direction: column;
  /* for Safari */
  display: flex;
  flex-direction: column;
}

.myTable {
  flex-grow: 1;
  width: 100%;
  border: grey solid;
}

<div class="container-fluid outerFlexBox">
  <div class="outerHeader">
    <h4>Some Outer Header</h4>
  </div>
  <div class="outerContent">
    <p>Some outer content</p>
    <div class="innerFlexBox">
      <div class="innerHeader">
        <p>Some Inner Header</p>
      </div>
      <div class="innerContent">
        <p>Some inner content</p>
        <table class="myTable">
          <thead>
            <tr>
              <th>Some Header Column</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Some row</td>
            </tr>
            <tr>
              <td>Some row</td>
            </tr>
            <tr>
              <td>Some row</td>
            </tr>
            <tr>
              <td>Some row</td>
            </tr>
            <tr>
              <td>Some row</td>
            </tr>
            <tr>
              <td>Some row</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

关于html - 浏览器支持另一个 flexbox 内的 Flexbox，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45902995/