Keep a div container with an OpenLayers 3 map and some elements below it at 100% height

Question

I use the Milligram CSS framework to create a simple responsive grid design which contains an OpenLayers 3 map (first row) and some text input fields, buttons etc. below it (second and further rows).

I would like the container which bundles the map and the elements below it to always stay at 100% height of the browser window, so that no matter the height of my monitor or laptop display, there will never be vertical scrolling necessary in order to view the map and the interaction elements at the same time. On small displays, this will go at the expense of the height of the map row, of course.

I already tried the solutions which are recommended in this post:

1. Setting .container {height:100vh;}
2. Setting body, html {height: 100%;} as well as .container {height: 100%;}
3. Setting .container {position: absolute; top: 0; bottom: 0;}

However, none of them seem to work in this case. If I decrease the height of my browser window, the container is not resized and a vertical scroll bar appears.

By the way I am not tied to the Milligram CSS framework so if anything else (simple preferred) works than this is also fine.

I created a minimal code snippet below, however, the map is not displayed for some reason that I cannot find right now... that's why I also created a JSFiddle with the same content where it works just fine: http://jsfiddle.net/hr8sL/5667/

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

body, html {
  height: 100%;
}

.container {
  height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.2.4/milligram.css" rel="stylesheet"/>
<script src="http://openlayers.org/en/v3.19.1/build/ol-debug.js"></script>
<link href="http://openlayers.org/en/v3.19.1/css/ol.css" rel="stylesheet"/>

<div class="container">

  <!-- first row -->
 <div class="row">
    <div class="column column-100">
      <div id="map" style="height: 600px; z-index: 1"></div>
    </div>
 </div>
  
  <!-- second row -->
  <div class="row">
    <div class="column">
      <div><input type="text"></div>
    </div>
    <div class="column">
      <div><input type="text"></div>
    </div>
  </div>
  
</div>