为什么“height: 1%”在我的 flex-box-layout 中解决了这个问题？

Question

在这支笔/小提琴中，我创建了一个非常非常简单的页面布局用于演示目的：See Pen/Fiddle here!

在浅蓝色的“内容”区域中，我有一个类为 flex-container 的 div，其中包含一个标题和一个 div 嵌套的图像。

<div class="content">
    <div class="flex-container">
      <h1>Nice Image</h1>
      <div>
        <img src="http://loremflickr.com/800/800" />
      </div>
    </div>
  </div>

我遇到的问题是，每当我将第 53 行中的图像 parent-div 高度设置为 100% 时，图像就会溢出。我开始玩弄它，一旦我将高度设置为小于 100%，图像就会很好地缩放以适应 div 的剩余高度，即 flex-growth 父 div 占据的区域。

  .content {
    background-color: rgba(0, 0, 255, 0.3);
    overflow: hidden;
    position: relative;
    height: 100%;
    box-sizing: border-box;

    .flex-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: rgba(255, 255, 255, 0.5);

      >div {
        flex-grow: 1;
        height: 1%;
      }

      img {
        height: 100%;
      }
    }
  }

我想知道这是为什么？这种方法感觉不是很干净，我想知道如何改进该布局以使其感觉不那么“hacky”。​​

完整的 HTML：

<div class="container">
  <div class="header">Nav</div>
  <div class="nav">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="content">
    <div class="flex-container">
      <h1>Nice Image</h1>
      <div>
        <img src="http://loremflickr.com/800/800" />
      </div>
    </div>
  </div>
  <div class="status">
    <p>Status: Lorem ipsum dolor sit amet</p>
  </div>
</div>

完整的 SCSS：

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

ul, h1, p, img {
  margin: 0;
  padding: 0;  
}

.container {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 38px 0px 30px 161px;
  box-sizing: border-box;

  .header {
    background-color: rgba(255, 0, 0, 0.3);
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 38px;    
  }

  .nav {
    background-color: rgba(0, 255, 0, 0.3);
    position: fixed;
    left: 0;
    width: 161px;
    height: 100%;
  }

  .content {
    background-color: rgba(0, 0, 255, 0.3);
    overflow: hidden;
    position: relative;
    height: 100%;
    box-sizing: border-box;

    .flex-container {
      height: 100%;
      display: flex;
      flex-direction: column;
      background-color: rgba(255, 255, 255, 0.5);

      >div {
        flex-grow: 1;
        height: 1%;
      }

      img {
        height: 100%;
      }
    }
  }

  .status {
    background-color: rgba(255, 255, 0, 0.3);
    position: fixed;
    left: 161px;
    bottom: 0;
    width: 100%;
    height: 30px;
  }
}

Answer 1

我开始玩弄它，一旦我将高度设置为小于 100% 的任何值，图像就会很好地缩放以适应 div 的剩余高度...

实际上，这并不完全正确。

当高度设置为小于 96% 时，图像完美契合。

这是因为容器中有两个项目占用空间：标题和图像。

标题占据了 5% 的高度。这为图像留下了 95%。

任何超过 95% 的内容都会溢出。

任何小于 95% 的东西都非常适合，因为 flex-grow: 1 被设置为消耗可用空间。如果没有flex-grow，图像容器会相应地缩小。

在您的图像周围添加一个边框，以便清楚地说明此行为 (revised codepen)。

Answer 2

原因是，如果您的弹性项目（flex-container 的 div 子项）没有高度，并且当您给 img 提供 100% 的高度时，它没有从在哪里计算，因此img 将采用其原始大小。

注意，flex-grow: 1 没有给它一个，它只是告诉弹性项目填充剩余空间

更新

以下带有额外包装器的建议似乎仅适用于 Chrome，因此我建议您暂时保留设置的高度，我会在了解更多信息后更新。

所以你既可以保持它的高度，也可以为img 添加一个包装器，并使flex-container 的div 子元素成为一个弹性容器。

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

ul, h1, p, img {
  margin: 0;
  padding: 0;
}

.container {
  background-color: rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 38px 0px 30px 161px;
  box-sizing: border-box;
}
.container .header {
  background-color: rgba(255, 0, 0, 0.3);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 38px;
}
.container .nav {
  background-color: rgba(0, 255, 0, 0.3);
  position: fixed;
  left: 0;
  width: 161px;
  height: 100%;
}
.container .content {
  background-color: rgba(0, 0, 255, 0.3);
  overflow: hidden;
  position: relative;
  height: 100%;
  box-sizing: border-box;
}
.container .content .flex-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.5);
}
.container .content .flex-container > div {
  flex-grow: 1;
  display: flex;
}
.container .content .flex-container img {
  height: 100%;
}
.container .status {
  background-color: rgba(255, 255, 0, 0.3);
  position: fixed;
  left: 161px;
  bottom: 0;
  width: 100%;
  height: 30px;
}

<div class="container">
  <div class="header">Nav</div>
  <div class="nav">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div class="content">
    <div class="flex-container">
      <h1>Nice Image</h1>
      <div>
        <div>
          <img src="http://loremflickr.com/800/800" />
        </div>
      </div>
    </div>
  </div>
  <div class="status">
    <p>Status: Lorem ipsum dolor sit amet</p>
  </div>
</div>