title: How can I flex-stretch elements to full device height on mobile Safari?
body: <p>I'm creating an accordion-like mobile webpage, trying to use the <code>flex</code> family of CSS properties.
  In short, I'm getting this:<br>
  <img src="https://i.stack.imgur.com/MHKe0.png" alt="Map section expanded on mobile browser">
  but I want this:
  <img src="https://i.stack.imgur.com/todUk.png" alt="Map section expanded on desktop browser">  </p>
  
  <p>The page consists solely of a set of <code>&lt;section&gt;</code>s, each of them having a clickable <code>&lt;header&gt;</code> and an <code>&lt;article&gt;</code>:</p>
  
  <pre><code>&lt;body&gt;
  &lt;section id="about"&gt;
      &lt;header&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/header&gt;
      &lt;article&gt;
          This will be about.
      &lt;/article&gt;
  &lt;/section&gt;
  &lt;section id="map"&gt;
      &lt;header&gt;&lt;a href="#map"&gt;Map&lt;/a&gt;&lt;/header&gt;
      &lt;article&gt;
          This will be a map.
      &lt;/article&gt;
  &lt;/section&gt;
  
  &lt;section id="talk"&gt;
      &lt;header&gt;&lt;a href="#talk"&gt;Talk&lt;/a&gt;&lt;/header&gt;
      &lt;article&gt;
          This will be talk
      &lt;/article&gt;
  &lt;/section&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Only one <code>&lt;article&gt;</code> should be displayed at any given time (the rest of them hidden), so:</p>
  
  <pre><code>&lt;style&gt;
  ...
  section:not(:target) article {
      display: none;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>So far, so good.<br>
  In order to use the full height of the device screen, that is, the height of the expanded section should be <code>deviceheight - height of all the header elements</code>. I've experimented with the <code>flex</code> properties, and I have no problem making it work as desired on my PC screen (using Chrome):</p>
  
  <pre><code>html {
      height: 100%
  }
  
  body {
      height: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      align-content: stretch;
      justify-content: flex-start;
      background: yellow;
  }
  
  section:target {
      flex: 1 1 auto;
  }
  
  section:not(:target) article {
      display: none;
  }
  
  section:not(:target) {
      height: auto;
      flex: 0 1 auto;
  }
  
  section {
      border: 1px solid black;
      background-color: green;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      align-content: stretch;
  }
  
  header {
      padding: 0.2em;
      background-image: linear-gradient(to bottom, black, rgba(100, 100, 100, 128));
      color: white;
      font-size: 12pt;
      font-weight: bold;
      font-family: "American Typewriter", serif;
      cursor: pointer;
      flex: 0 0 auto;
  }
  
  header a {
      color: white;
  }
  
  article {
      width: 100%;
      height: 100%;
      display: block;
      background-color: yellowgreen;
      flex: 1 0 auto;
  }
  </code></pre>
  
  <p>This produces something like this, on a desktop PC with Chrome, when the <em>Map</em> section is expanded:<br>
  <img src="https://i.stack.imgur.com/todUk.png" alt="Map section expanded on desktop browser"><br>
  The <em>Map</em> section takes all available space, just like I intended.</p>
  
  <p><strong>Now</strong>, with Mobile Safari, the expanded section does <em>not</em> use all available vertical space, but instead only enough to display its contents:<br>
  <img src="https://i.stack.imgur.com/MHKe0.png" alt="Map section expanded on mobile browser"><br>
  As can be seen, the green <em>Map</em> section does not push the <em>Talk</em> header down to the bottom of the screen, instead the yellow <code>body</code> background color comes through.</p>
  
  <p>I thought this would be rectified by specifying <code>height=device-height</code>, but that does not change anything:</p>
  
  <pre><code>&lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"/&gt;
  </code></pre>
  
  <p>I'd like the expanded section to use all available space, so that no yellow background color is visible. What am I missing in my CSS rules? I'd like to avoid resorting to JavaScript.</p>
  
  <p>The full code can be fetched from <a href="https://gist.github.com/vramdal/4d764aef41bd39e8c96d" rel="nofollow noreferrer">https://gist.github.com/vramdal/4d764aef41bd39e8c96d</a></p>