title: How to display the equal width of the div using CSS?
body: <p>I am getting output from a database. Sometimes I am getting 2 div and sometimes I am getting 3 div so I have to set the equal width of the div. I mean if there are 2 div then set 50% of each and if there are 3 div then set 33.33% of each. Would you help me in this?</p>
  
  <p><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> #container1
    {
      width: 100%;
      display: inline-flex;
    }
  #container1 div{
        color: #fff;
      display: inline-block;
      height: 100%;
      width: 50%;
      background: #24252A;
      text-align: center;
      cursor: default;
      padding: 2em 0;
  }
  
  #container1 div:nth-of-type(2) {
      background: red;
      }
  
  #container1 div:nth-of-type(3)
  {
      width: 33.33% !important;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container1"&gt;
    &lt;!--div depanding upload database--&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
    &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>