如何在浮动内容上使用 `flex: grow`？

Question

我有一个 header 包含 2 行 2 列内容，如下所示：

<div class="wrapper">
  <div class="header row">
    <div class="large-6 columns">
        HEADER
    </div>
    <div class="large-6 columns">
        menu
    </div>
  </div>
  <div class="row">
    <div class="large-5 none show-for-medium columns info">
     Some information to the left
    </div>
    <div class="large-7 columns">
      <div class="image-container">
        <div class="image">
           image to the right
        </div>
      </div>
    </div>
  </div>
</div>

.header 高度是动态的，未设置。我希望 .image 元素占据剩余垂直 space.

的 100%

例如：

为此，我尝试使用 flex 和 flex-grow，例如：

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}

.image-container {
  flex-grow: 1;
}

但运气不好，见fiddle：https://jsfiddle.net/9kkb2bxu/46/

谁知道我如何从图像容器的 100vh 中取反 header 的动态高度？

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  border: 1px solid black;
  background-color: #ccc;
}

.row {
    width: 100%;
}

.header {
  background-color: green;
}

.info {
  background-color: yellow;
  border: 1px solid #ccc;
}

.image-container {
  border: 1px solid black;
  display: flex;
}

.image {
  background-color: red;
  flex-grow: 1;
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="header row">
    <div class="large-6 columns">
      <h1>
        HEADER
      </h1>
    </div>
    <div class="large-6 columns">
      <h1>
        menu
      </h1>
    </div>
  </div>

  <div class="row">
    <div class="large-5 none show-for-medium columns info">
     Some information to the left
    </div>
    <div class="large-7 columns">
      <div class="image-container">
        <div class="image">
           image to the right
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

flex-grow 仅适用于 flex 子项。

.image-container 不是 display: flex 元素的直接子元素，因此属性无效。

此外，它会影响弹性轴，这不是您想要的。

相反，您需要将这两个元素放在它们自己的 flex 行中，并使用 align-items（在父级上）和 align-self（在任一子级上）以便第一个对齐（在横轴上）到 flex-start（贴在顶部），第二个到 stretch.

您还希望弹性行（父级）具有 flex-grow: 1，以便它沿其父级（.wrapper）的垂直弹性轴伸展以填充页面的其余部分（否则，孙子就无所遁形了)。

有关详细信息，请阅读优秀的 flex 教程。

Answer 2

div.wrapper > div:not(.header).row {
    flex: 1;                         /* 1 */
    display: flex;                   /* 1 */
}

div.large-7.columns {
    display: flex;                   /* 2 */
}

div.image-container {                /* 3 */
     flex: 1;
}

div.large-5.show-for-medium {        /* 4 */
     align-self: flex-start;
}

jsFiddle

备注：

弹性容器和项目占用各自 parents
给出 children 全高（通过 align-items: stretch 初始设置）
弹性项目占用所有可用宽度
黄框不需要展开到全高；现在设置为内容高度

Answer 3

使用 flex: 1 将第二行设置为占据剩余高度的其余部分，并确保将 flex 嵌套为 display: flex:

.row.target-row {
  flex: 1;
  display: flex;
}

将 .image-container 设置为其父列的 100% 高度。

.image-container {
  height: 100%;
}

默认情况下，两列都会展开。停止左列扩展：

.large-5 {
  align-self: flex-start;
}

(flex-start参考：)

完整示例

.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  border: 1px solid black;
  background-color: #ccc;
}

.row {
  width: 100%;
}

.header {
  background-color: green;
}

.info {
  background-color: yellow;
  border: 1px solid #ccc;
}

.image-container {
  height: 100%;
  background-color: red;
}

.large-5 {
  align-self: flex-start;
}

.row.target-row {
  flex: 1;
  display: flex;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="header row">
    <div class="large-6 columns">
      <h1>
        HEADER
      </h1>
    </div>
    <div class="large-6 columns">
      <h1>
        menu
      </h1>
    </div>
  </div>

  <div class="row target-row">
    <div class="large-5 none show-for-medium columns info">
      Some information to the left
    </div>
    <div class="large-7 columns">
      <div class="image-container">
        <div class="image">
          image to the right
        </div>
      </div>
    </div>
  </div>
</div>

如何在浮动内容上使用 `flex: grow`？

How to use `flex: grow` on floating content?

html

css

flexbox

zurb-foundation

jsFiddle

完整示例