How to make a <div> fills remaining height in ionic
<p>Actually I'm trying to rebuild an android app of mine as a hybrid app with ionic. </p>

<p>Probably my question is more about CSS. But maybe there is some ionic magic to create following layout</p>

<p><a href="https://i.stack.imgur.com/kG5db.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kG5db.png" alt="enter image description here"></a></p>

<p>I need three DIVs. One on top of the screen, one in the middle and one on the bottom.</p>

<p>The top one has fixed size, the bottom div should take so much play it need.</p>

<p>And the middle div should use the remaining space.</p>

<p>Here is my first draft. I tried to play with styles, but now I'm just lost:</p>

<pre><code>&lt;ion-content&gt;
  &lt;div style="border:solid 1px #333333"&gt;&lt;/div&gt;
  &lt;div style="border:solid 1px #333333"&gt;&lt;/div&gt;
  &lt;div style="border:solid 1px #333333"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;1&lt;/button&gt;&lt;/div&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;2&lt;/button&gt;&lt;/div&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;3&lt;/button&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;4&lt;/button&gt;&lt;/div&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;5&lt;/button&gt;&lt;/div&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;6&lt;/button&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;7&lt;/button&gt;&lt;/div&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;8&lt;/button&gt;&lt;/div&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;9&lt;/button&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;Copy&lt;/button&gt;&lt;/div&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;0&lt;/button&gt;&lt;/div&gt;
      &lt;div class="col"&gt;&lt;button class="button button-block button-stable"&gt;Remove&lt;/button&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/ion-content&gt;
</code></pre>

<p><strong>UPD:</strong>
it's not really the duplicate of other questions, because of ionic. I've got flex working in normal html prototype, but once I tried to move it to ionic it stopped working. </p>