title: Cannot adjust the height of container accordingly to the content
body: <p>I have this CSS project I am working on and now I am in the phase where I will start to embelish it with some effects and nice colors. However I just realized that there is a small issue with it: the beige container won't adjust its height as the blue cells move around. Could anyone help please? Here it is my code:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.min.js&quot; integrity=&quot;sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;OEPanel.js&quot;&gt;&lt;/script&gt;
          &lt;link rel=&quot;stylesheet&quot; href=&quot;./OEPanel.css&quot;&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id=&quot;oepanelcontainer&quot; class=&quot;OEContainer&quot;&gt;
      &lt;div id=&quot;oepanel&quot; class=&quot;OEItems&quot;&gt;
          &lt;div id=&quot;oecell1&quot; class=&quot;OECell&quot;&gt;&lt;/div&gt;
          &lt;div id=&quot;oecell2&quot; class=&quot;OECell&quot;&gt;&lt;/div&gt;
          &lt;div id=&quot;oecell3&quot; class=&quot;OECell&quot;&gt;&lt;/div&gt;
          &lt;div id=&quot;oecell4&quot; class=&quot;OECell&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.OEContainer {
      background-color: beige;
      min-height: 10em;
      vertical-align: middle;
      padding: 10px;
      max-width:1130px;
      margin:auto;
      text-align:center;
      justify-content:space-between;
  }
  
  .OEItems {
      min-height: 10em;
      vertical-align: middle;
      padding: 0px;
      max-width:1130px;
      margin:auto;
      text-align:center;
      justify-content:space-between;
  }
  
  .OECell {
      background-color: lightblue;
      min-height: 10em;
      vertical-align: middle;
      padding: 0px;
      width:250px;
      text-align:center;
      float: left;
      margin: 5px;
  }
  
  @media (max-width: 500px) {
      .OEContainer {
          flex-direction: column;
          align-items: center;
      }
  }
  </code></pre>
  <p><strong>JS</strong></p>
  <pre><code>// config
  var __OECELLS = 4; // the total of oecells in HTML (oecell1, oecell2...)
  var __CELLWIDTH = 250; // the width of cells in pixels
  var __MAXSCREENWIDTH = 1130;  // the maximum width of screen in pixels
  
  var __MAXCELLS = parseInt(__MAXSCREENWIDTH/__CELLWIDTH);
  var __ADJUSTMENT = (__CELLWIDTH-30)/2;
  var __CELLSPERROW;
  
  $(function() {
      RedefinePanel();
  });
  
  $(window).resize(function() {
      RedefinePanel();
  });
  
  function RedefinePanel() {
      var viewportWidth = $(window).width();
      let __CELLSPERROW = parseInt((viewportWidth-__ADJUSTMENT)/__CELLWIDTH);
      document.getElementById(&quot;oepanel&quot;).style.width = ((__CELLSPERROW)*__CELLWIDTH+(__CELLSPERROW*17)) + &quot;px&quot;;
  </code></pre>
  <p>Thanks!</p>