title: Angular2 - Google Form not responsive on iOS
body: <p>I'm creating a site using Angular 2, I successfully included a Google Form inside using an iFrame. It's working perfectly on every browser I tested (Firefox, Opera, Chrome) on my laptop (linux) and on my phone (android).</p>
  
  <p>However, it's not working on iOS. The iframe is diplayed and can be scrolled (<a href="https://i.stack.imgur.com/X7Mvi.jpg" rel="nofollow noreferrer">screenshot</a>) but it's too large for the screen, it's not responsive at all. Here is what it looks like on my <a href="https://i.stack.imgur.com/bbL0e.png" rel="nofollow noreferrer">tablet</a> (android).</p>
  
  <p>I tried fixing it by looking at a dozen stackoverflow answers, but so far I've only managed to make the iframe scrollable by adding the last line of CSS. It's been a month now that I'm stuck with the iframe like this and I'm becoming a bit desperate!</p>
  
  <p>Setting the width of the iframe manually to an absolute value has no effect on iOS (but it does have one on my phone).</p>
  
  <p>This is the CSS of the div that contains the iframe:</p>
  
  <pre><code>display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  </code></pre>
  
  <p>and this is the CSS of the iframe itself:</p>
  
  <pre><code>max-width: 100%;
  min-width: 100%;
  height: 100%;
  </code></pre>
  
  <p>Here is the HTML part containing the iframe:</p>
  
  <pre><code>&lt;div class="frame-flex"&gt;
      &lt;iframe src="https://docs.google.com/forms/whatever/viewform?embedded=true" frameborder="0" marginheight="0" marginwidth="0"&gt;Loading...&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I must add that I'm a beginner in HTML/CSS (in case you're wondering why the CSS is ugly). Thanks for your time anyway!</p>