title: List keeps going on forever on the x axis
body: <p>I have a make-shift code to show multiple pages in one html. I have it to where you can only have one page shown and you can switch between four pages. But, whenever I try to have more rows of li, it goes past the screen. How can I fix this. Basically, instead of going to the next row, it just keeps adding them horizontally.</p>
  
  <p>cases.html</p>
  
  <pre><code>&lt;div class="main_div"&gt;
                  &lt;div class="inner_div"&gt;
                      &lt;a name="product"&gt;&lt;/a&gt;
                      &lt;ul id="Div1"&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;&lt;br/&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul id="Div2" style="display: none;"&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul id="Div3" style="display: none;"&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul id="Div4" style="display: none;"&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;h2&gt;Yeet&lt;/h2&gt;
                              &lt;img src="images/test.png"&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div class="buttons"&gt;
                      &lt;a href="#" onclick="divVisibility('Div1');"&gt;Page 1&lt;/a&gt; | 
                      &lt;a href="#" onclick="divVisibility('Div2');"&gt;Page 2&lt;/a&gt; | 
                      &lt;a href="#" onclick="divVisibility('Div3');"&gt;Page 3&lt;/a&gt; | 
                      &lt;a href="#" onclick="divVisibility('Div4');"&gt;Page 4&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>.main_div{
      width: 900px;
      margin: auto;
  }
  .inner_div{
      width: 900px;
  }
  .inner_div ul{
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      width: 100%;
      margin: 0;
      padding: 0;
  }
  .inner_div ul li{
      width: 290px;
      flex: 0 1 auto;
      list-style-type: none;
  }
  .inner_div ul img{
      width: 200px;
      margin: 15px 45px;
      border: 3px solid black;
      border-radius: 10px;
  }
  .buttons{
      text-align: center;
  }
  </code></pre>
  
  <p>pages.js</p>
  
  <pre><code>var divs = ["Div1", "Div2", "Div3", "Div4"];
  var visibleDivId = null;
  function divVisibility(divId) {
    if(visibleDivId === divId) {
    } else {
      visibleDivId = divId;
    }
    hideNonVisibleDivs();
  }
  function hideNonVisibleDivs() {
    var i, divId, div;
    for(i = 0; i &lt; divs.length; i++) {
      divId = divs[i];
      div = document.getElementById(divId);
      if(visibleDivId === divId) {
        div.style.display = "flex";
      } else {
        div.style.display = "none";
      }
    }
  }
  </code></pre>