JSFiddle - React, Tailwind, and code Playground

HTML

<body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accomodate inner divs -->
        <p>The red is main content</p>
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
            <p>details div</p>
        </div>
        <div id="item_36" class="item_details">
            <p>details div</p>
        </div>        
        <div id="item_37" class="item_details">
            <p>details div</p>
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>

    <div id="footer">
    </div>
  </body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
    width: 100%;
    min-height: 200px;
    background-color: red;
    overflow: auto;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
    width: 50%;
    height: 300px;
    background-color: yellow;
}

.item_details *{
    text-align: center;
    line-height: 55vh;
}