MeltingDog MeltingDog -4 years ago 207
CSS Question

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

I have a header with 2 rows of 2 Foundation columns of content, as below:

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


The
.header
height is dynamic and not set. I want the
.image
element to take up 100% of the remaining vertical space.

eg:

enter image description here

To that affect I have tried using flex and flex-grow, eg:

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

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


but had no luck, see fiddle: https://jsfiddle.net/9kkb2bxu/46/

Would anyone know how I could negate the dynamic height of the header from the 100vh of the image container?



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

Set the second row to take up the rest of the remaining height with flex: 1 and make sure you nest that flex with display: flex:

.row:nth-child(2) {
  flex: 1;
  display: flex;
}

Set the .image-container to 100% height of its column parent.

.image-container {
  height: 100%;
}

By default both columns will expand. Stop the left column from expanding with:

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

(flex-start reference: http://stackoverflow.com/a/40156422/2930477)

Complete Example

.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:nth-child(2) {
  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">
    <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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download