title: 100% height SVG is pushing text out of the wrapper div
body: <p>I have 6 icons I want to display 3 to a row.  The icon width should be 20% of the total row.  It looks alright, but the icon label is being pushed out of the wrapper div (blue dotted line).</p>
  
  <p>How can I expand the wrapper to include the label?</p>
  
  <p>html (pug)</p>
  
  <pre><code>#footer-menu
    each category in categories
      .icon
        .wrapper
          include ../../assets/images/icons/bank_icon.svg
          p 
            =category.title
  </code></pre>
  
  <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>    
  #footer-menu {
  
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 30px 0;
    width: 100%;
  }
  #footer-menu p {
    margin-bottom: 0;
  }
  
    #footer-menu {
      padding: 30px 0;
      background: red;
    }
    #footer-menu .icon {
    box-sizing: border-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-pack: center;
      justify-content: center;
      width: 20%;
      border: solid 1px yellow;
    }
    #footer-menu .icon img {
      width: 100%;
    }
    #footer-menu .icon:nth-child(3n+3) {
      margin-left: 20%;
    }
    #footer-menu .icon:nth-child(3n+1) {
      margin-right: 20%;
    }
    #footer-menu svg {
      display: block;
      width: 100%;
      height: 100%;
    }
    #footer-menu .wrapper {
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -ms-flex-pack: center;
      justify-content: center;
      border: dashed 2px blue;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-8"&gt;&lt;div id="footer-menu"&gt;&lt;div class="icon"&gt;&lt;div class="wrapper"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .a {
          fill: none;
          stroke: #2d1d24;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 6px;
        }
      &lt;/style&gt;
    &lt;/defs&gt;
    &lt;title&gt;Asset 3&lt;/title&gt;
    &lt;g&gt;
      &lt;circle class="a" cx="101.15" cy="101.15" r="98.15"&gt;&lt;/circle&gt;
      &lt;path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;p&gt; Banking&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="icon"&gt;&lt;div class="wrapper"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .a {
          fill: none;
          stroke: #2d1d24;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 6px;
        }
      &lt;/style&gt;
    &lt;/defs&gt;
    &lt;title&gt;Asset 3&lt;/title&gt;
    &lt;g&gt;
      &lt;circle class="a" cx="101.15" cy="101.15" r="98.15"&gt;&lt;/circle&gt;
      &lt;path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;p&gt; Savings&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="icon"&gt;&lt;div class="wrapper"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .a {
          fill: none;
          stroke: #2d1d24;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 6px;
        }
      &lt;/style&gt;
    &lt;/defs&gt;
    &lt;title&gt;Asset 3&lt;/title&gt;
    &lt;g&gt;
      &lt;circle class="a" cx="101.15" cy="101.15" r="98.15"&gt;&lt;/circle&gt;
      &lt;path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;p&gt; Loans&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="icon"&gt;&lt;div class="wrapper"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .a {
          fill: none;
          stroke: #2d1d24;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 6px;
        }
      &lt;/style&gt;
    &lt;/defs&gt;
    &lt;title&gt;Asset 3&lt;/title&gt;
    &lt;g&gt;
      &lt;circle class="a" cx="101.15" cy="101.15" r="98.15"&gt;&lt;/circle&gt;
      &lt;path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;p&gt; Credit&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="icon"&gt;&lt;div class="wrapper"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .a {
          fill: none;
          stroke: #2d1d24;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 6px;
        }
      &lt;/style&gt;
    &lt;/defs&gt;
    &lt;title&gt;Asset 3&lt;/title&gt;
    &lt;g&gt;
      &lt;circle class="a" cx="101.15" cy="101.15" r="98.15"&gt;&lt;/circle&gt;
      &lt;path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;p&gt; Budgeting&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;div class="icon"&gt;&lt;div class="wrapper"&gt;&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202.3 202.3"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .a {
          fill: none;
          stroke: #2d1d24;
          stroke-linecap: round;
          stroke-linejoin: round;
          stroke-width: 6px;
        }
      &lt;/style&gt;
    &lt;/defs&gt;
    &lt;title&gt;Asset 3&lt;/title&gt;
    &lt;g&gt;
      &lt;circle class="a" cx="101.15" cy="101.15" r="98.15"&gt;&lt;/circle&gt;
      &lt;path class="a" d="M135.93,148.81h-30v12H93v-12H53V135.93H93V103.8H67.43L54.09,92.74V62.27L67.43,50.91H93v-9.4h12.88v9.4h40.92V63.79H105.92V90.92h30.16L149.27,102v35.16ZM93,63.79H72.58L67,68.19V86.67l5.3,4.24H93Zm43.34,67V109l-5.76-5.15h-24.7v32.13h24.55Z"&gt;&lt;/path&gt;
    &lt;/g&gt;
  &lt;/svg&gt;
  &lt;p&gt; Investing&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/gob96.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gob96.png" alt="Icon labels are outside of wrapper div"></a></p>