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

Question

我有一个包含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元素占用剩余垂直空间的100％。

例如：

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

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

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

但没有运气，请看小提琴：https://jsfiddle.net/9kkb2bxu/46/

有人知道如何否定图像容器的100vh标题的动态高度？

.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仅适用于弹性儿童。

.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

注意：

1. 弹性容器和物品消耗相应父母的所有剩余高度
2. 给孩子全高（通过align-items: stretch初始设定）
3. 弹性项目消耗所有可用宽度
4. 黄色框不需要扩展到全高;现在设置为内容高度

Answer 3

设置第二行以使用flex: 1占据剩余的高度，并确保使用display: flex嵌套该flex：

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

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

.image-container {
  height: 100%;
}

默认情况下，两列都会展开。使用以下命令停止左列扩展：

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

（flex-start参考：https://stackoverflow.com/a/40156422/2930477）

完整示例

.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>