title: Css: overflow in Safari behaviour
body: <p>I have parent div in which child divs are being added on a click. On the parent div the css is as:</p>
  
  <pre><code>display: -webkit-inline-flex;
  overflow: auto;
  height: 106px;
  </code></pre>
  
  <p>The width of the parent div which is set by bootstrap class : </p>
  
  <pre><code>"col-sm-11"
  </code></pre>
  
  <p>On chrome whenever there are more elements than the width, it shows a horizontal bar due to the overflow css property on the parent div, which is perfect.
  But the same property isn't working in the Safari and in Safari the child divs adjust their width to the parent divs and gradually shorten their width to fit in the parent div.
  Any solution would be helpful ?</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="compare-bar-append" class="col-sm-11"&gt;
      &lt;div class="compare-block"&gt;
          &lt;div&gt; 
              &lt;h4 class="text-compare event-name truncate"&gt; Gallery &lt;/h4&gt;
              &lt;i class="remove glyphicon glyphicon-remove-sign glyphicon-white" &gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="compare-block"&gt;
          &lt;div&gt; 
              &lt;h4 class="text-compare event-name truncate"&gt;Gallery&lt;/h4&gt;
              &lt;i class="remove glyphicon glyphicon-remove-sign glyphicon-white" &gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="compare-block"&gt;
          &lt;div&gt; 
              &lt;h4 class="text-compare event-name truncate"&gt;Gallery&lt;/h4&gt;
              &lt;i class="remove glyphicon glyphicon-remove-sign glyphicon-white" &gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="compare-block"&gt;
          &lt;div&gt; 
              &lt;h4 class="text-compare event-name truncate"&gt;Gallery&lt;/h4&gt;
              &lt;i class="remove glyphicon glyphicon-remove-sign glyphicon-white" &gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Css:</strong></p>
  
  <pre><code>#compare-bar-append{
      display: inline-flex;
      display: -webkit-inline-flex;
      overflow: auto;
      height: 106px;
  }
  
  .compare-block{
      border-right: 1px solid #B9C5E3;
      padding-right: 23px;
      padding-left: 23px;
      width: 20%;
  }
  
  .compare-block div{
      display: inline-flex;
      display: -webkit-inline-flex;
      width: 100%;
  }
  </code></pre>