title: svg and inline-block display issue on Firefox
body: <p>As suggested by @Robert Longson I'm rewriting original question.
  I have 3 inline svgs with <code>bottom-padding</code> hack in containers. I want this boxes to be inline, so in css I've added <code>inline-block</code> and I want have width not exceeding some value so on the same container I added <code>max-width</code> attribute.</p>
  
  <p>All is fine except for Firefox, where the big box is not displayed and two small boxes are much smaller compared to Chrome. 
  Now as @Rahul suggested I used <code>width</code> instead of <code>max-width</code> and it fixed the issue. Looks like bug in Firefox with svg. </p>
  
  <p>Link to code: <a href="https://jsfiddle.net/mikeNIN/2yjob68o/" rel="nofollow noreferrer">https://jsfiddle.net/mikeNIN/2yjob68o/</a> and code:
  HTML:</p>
  
  <pre><code>&lt;div class='container_main' onclick=''&gt;
    &lt;div class='main' id='main-info'&gt;
      &lt;div id='weather-icon'&gt;
        &lt;div class="svg_container"&gt;
         &lt;svg width="100%" style="padding-bottom: 64%; height: 1px; overflow: visible" viewBox="0 0 64 41" preserveAspectRatio="xMidYMin slice" version="1.1"&gt;&lt;g transform="translate(0,-1011.3622)"&gt;&lt;rect width="63.8" height="40.8" x="0.1" y="1011.5" style="fill:#a662bd;stroke-linecap:round;stroke-width:0.2;stroke:#000"/&gt;&lt;/g&gt;&lt;/svg&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='enh' id='enhanced-info'&gt;
      &lt;div class='svg_container_small'&gt;
        &lt;svg width="100%" style="padding-bottom: 100%; height: 1px; overflow: visible" viewBox="0 0 16 16" preserveAspectRatio="xMidYMin slice" version="1.1"&gt;&lt;g transform="translate(0,-1036.741)"&gt;&lt;rect width="15.9" height="15.9" x="0" y="1036.8" style="fill:#35c062;stroke-linecap:round;stroke-width:0.1;stroke:#000"/&gt;&lt;/g&gt;&lt;/svg&gt;
        &lt;span&gt;small1&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class='svg_container_small'&gt;
        &lt;svg width="100%" style="padding-bottom: 69%; height: 1px; overflow: visible" viewBox="0 0 16 11" preserveAspectRatio="xMidYMin slice" version="1.1"&gt;&lt;g transform="translate(0,-1041.3622)"&gt;&lt;rect width="15.9" height="10.9" x="0" y="1041.4" style="fill:#4114bd;stroke-linecap:round;stroke-width:0.1;stroke:#000"/&gt;&lt;/g&gt;&lt;/svg&gt;
        &lt;span&gt;small2&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html { 
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -ms-box-sizing: border-box;
   box-sizing: border-box;
  }
  .main {
   text-align: center;
  }
  .container_main {
   min-height: 100vh;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: column;
  }
  .svg_container {
   max-width: 12em;
   display: inline-block;
   vertical-align: top;
   margin-top: 10px;
   margin-bottom: 10px;
   }
   .enh {
   text-align:center;
  }
   .svg_container_small {
   max-width: 6em;
   display: inline-block;
   vertical-align: top;
   margin: 10px;
   }
  </code></pre>