html - 如何在 float 内容上使用 `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;
}

但运气不好，请参阅 fiddle :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: 1 将第二行设置为占用剩余高度的其余部分，并确保使用 display: flex 嵌套该 flex:

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

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

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