Question

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

在淡蓝色＆＃34;内容＆＃34; -area中，我有一个带有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 height设置为100％时，图像就会流过。我开始玩它，并且一旦我将高度设置为低于100％的任何值，图像就会很好地缩放以适应div的剩余高度，即灵活增长的父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%;
      }
    }
  }

我想知道为什么会这样？这种方法感觉不是很干净，我想知道如何改进布局，让它感觉更少＆＃34; hacky＆＃34;。

完整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

原因是，如果您的弹性项目（flex-container的{{1}}子级）没有高度，并且div的高度为100％，它没有从哪里计算，因此img将采用其原始大小。

注意，img不会给它一个，它只是告诉flex项目填充剩余空间

更新

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

~~因此，您可以保持其高度，或者您可以为flex-grow: 1添加包装，并使img的{{1}}子项成为弹性容器。~~

<击>

flex-container

div

<击>

Answer 2

我开始玩它，只要我将高度设置为低于100％的任何值，图像就可以很好地缩放以适应div的剩余高度...

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

当高度设置为低于96％时，图像非常适合。

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

标题占据了高度的5％。这使得图像保留了95％。

任何超过95％的东西都会溢出。

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

在图片周围添加边框，以清楚地说明此行为（revised codepen）。

为什么＆＃34;身高：1％＆＃34;在我的flex-box-layout中修复此问题？

2 个答案: