title: how to embed Google Form iframe in html css with flexible height (responsive)
body: <p>The problem is that I have multi page google form with each page has different amount of text#. It's to be embedded in long form blog post as a quiz. The problem is that google only provides iFrame code and iframe isn't letting me set flexible height.</p>
  
  <p>I have tried Ben Marshall, I've tried <code>height:100%</code> in both style header and in the actual iframe and still not.</p>
  
  <ol>
  <li>If I give it the average height, one needs to scroll on longest text</li>
  <li>If I give it the height of the longest slide, then there is a huge white space. </li>
  <li>When I give no height, the iframe is really small and one has to scroll on even the shortest page.</li>
  </ol>
  
  <p>Ideally I want a way to use a flex box or something around the iframe that it will change height depending on the size of the form.
  Otherwise is there a way to make the google form the center of the iframe - to divide the extra space up?
  This is a example google form</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;iframe src="https://docs.google.com/forms/d/e/1FAIpQLSf0yROc5FfPcvex7G3e1uPGXo3nmQMk99EKZypuarafcVtwhw/viewform?embedded=true" width="640" height="903" frameborder="0" marginheight="0" marginwidth="0"&gt;Loading...&lt;/iframe&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am only familiar with CSS and Html. </p>
  
  <p>Thank you for your time and assistance</p>