Question

我花了一整天时间努力完成这项工作。虽然我可以使用一个柔性盒，但当柔性盒包含另一个柔性盒时会变得很麻烦。

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

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

让事情变得更加混乱的是，Safari和Chrome似乎在显示完全不同的页面。这使我更难理解我做错了什么。

我要做的是，有一个带有标题和内容的外部弹性框。这个外部柔性盒在内容中应该有另一个柔性盒，同样具有标题和内容。

看起来位于内部柔性盒内容的桌子不属于内部柔性盒。

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（右）的相同页面。

Answer 1

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

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

此外，我同时制作了outerContent和innerContent个弹性容器，因此Flebox可以完全填充剩余的空间。

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

Fiddle demo

Stack snippet

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>

浏览器支持另一个Flexbox内的Flexbox

1 个答案: