title: Div flowing over top of screen
body: <p>I am attempting to display two maps, one directly above the other, with text positioned above the first map and the second map.  Each of the maps are contained in <code>centered-box</code>. I have tried a variety of different parameters - <code>body { margin:0; padding:0; }</code>  , adding <code>display: absolute</code> to the <code>centered-box</code> class, removing <code>overflow:auto</code> but none of them work.  </p>
  
  <p>I understand the solution is simple - how would one position these containers in the center of the screen and not to flow off of the page? </p>
  
  <p>In addition "TEXT" should be aligned to the left edge of the box, and should not overflow over the right edge of the box. </p>
  
  <p>Here is the example in <a href="https://jsfiddle.net/h0wL50Lv/#&amp;togetherjs=ELbI3CB3Fz" rel="nofollow noreferrer">JS fiddle</a> with just the containers </p>
  
  <pre><code>   &lt;style&gt;
      body {display: flex;
    /* Specify direction where all items will */
    flex-direction: column;
    /* Center all items in this direction */
    align-items: center;}
  
          #map {
            width:50%;
            overflow: auto;}
  
          #map2 {
            width:50%;
            overflow: auto;}
  
          .text{
              color:#282828; font-family:Arial; font-weight:200;
          }
          .centered-box {
            left: 25%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 250px;
            height: 250px;
            align-content: center;
            border: 1px solid red;
            overflow: scroll;
          }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;style&gt;
  
  
  button {
      position: fixed;
      margin: 5px;
      right: 0px;
      z-index: 1010101010
  }
  
  #pause::after {
      content: 'Pause';
  }
  
  #pause.pause::after {
      content: 'Play';
  }
  
  &lt;/style&gt;
  
      &lt;div class="text"&gt;TEXT&lt;/div&gt;
      &lt;div class="centered-box" id="map"&gt;
      &lt;button id="pause"&gt;&lt;/button&gt;
  &lt;/div&gt;
      &lt;div class="text"&gt;TEXT&lt;/div&gt;
      &lt;div class="centered-box" id="map2"&gt;
      &lt;button id="pause"&gt;&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>