In this pen/fiddle I created a very, very simple page layout for demonstration purposes: [See Pen/Fiddle here!](https://codepen.io/ChrisVomRhein/pen/EvzYwy)

In the light blue "content"-area I have a div with class `flex-container` which holds a title and a div-nested image.

```
<div class="content">
    <div class="flex-container">
      <h1>Nice Image</h1>
      <div>
        <img src="http://loremflickr.com/800/800" />
      </div>
    </div>
  </div>

```

The issue I ran into was that whenever I set the images parent-div height in line 53 to 100%, the image would flow over. I started playing around with it, and as soon as I set the height to anything less than 100%, the image nicely scales to fit the remaining height of the div, i.e. the area taken up by the flex-growing parent 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%;
      }
    }
  }

```

I am wondering why this is? This approach does not feel very clean, and I am wondering how I could improve that layout to make it feel less "hacky".

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

```

**Full 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;
  }
}

```