title: Disable resizing of fixed flex
body: <p>I'm using this html below to display a flex view on my website. But changing the text <strong>(length of the text)</strong> from a div will lead to the crazy-looking autoresizing.</p>
  
  <p>How can I avoid this resizing in relation to this special <strong>div element below</strong>? How to keep the same layout when the click button is clicked?</p>
  
  <p>Edit: <strong>I would like that neither the size nor the position of any element changes. (No matter how much text is inside!)</strong></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;div style="position: fixed; width:100%; height: 30%; left:0%; top: 0%; background: black; display: flex; justify-content: space-around; text-align: center; color: white"&gt;
     &lt;div&gt;
         &lt;div style="font-size: 17px"&gt;Info A&lt;/div&gt;
         &lt;div style="font-size: 29px;" id="text"&gt;text1&lt;/div&gt;
     &lt;/div&gt;
     &lt;div&gt;
         &lt;div style="font-size: 17px"&gt;Info B&lt;/div&gt;
         &lt;div style="font-size: 29px;"&gt;text2&lt;/div&gt;
     &lt;/div&gt;
     &lt;div&gt;
         &lt;div style="font-size: 17px"&gt;Info C&lt;/div&gt;
         &lt;div style="font-size: 29px;"&gt;text3&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;input onclick="document.getElementById('text').innerHTML+='.'" type="button" value="click"&gt;</code></pre>
  </div>
  </div>
  </p>