title: Prevent Growing Div Underneath from Pushing Up Div Above
body: <p>I'm having an issue with a <code>&lt;div&gt;</code> pushing up another <code>&lt;div&gt;</code> from underneath.</p>
  
  <p>Basically, the <code>&lt;div&gt;</code> above is a <code>&lt;canvas&gt;</code> of defined dimensions, and underneath is a <code>&lt;div&gt;</code> that contains a <code>&lt;p&gt;</code> element. After a event is fired, I'm using <code>innerHTML</code> to change the contents of the <code>&lt;p&gt;</code> element. Because of this, the content of the <code>&lt;p&gt;</code> element goes from one line to two. When that happens, however, the <code>&lt;canvas&gt;</code> is pushed up the page.</p>
  
  <p>I've tried using different <code>position</code> CSS values, but because I'm using flexbox it means that the two divs stack up.</p>
  
  <p>Here's the CSS and HTML:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    padding: 10px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .player {
    margin-bottom: 20px;
  }
  
  .textContainer {
    font-size: 24px;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
      &lt;script src="main.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="player"&gt;
          &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
        &lt;/div&gt;
        &lt;div class="textContainer"&gt;
          &lt;p id="moveText"&gt;Moves: 0&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks in advance!</p>