title: Inline SVG Disappears with Flexbox
body: <p>I am trying to center an inline SVG element both vertically and horizontally using Flexbox. For some reason when I <code>display: flex</code> on the parent container, the inline SVG just disappears.</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>body {
    background-color: #000;
    margin: 0;
    border: 0;
    outline: 0;
  }
  
  .flexbox-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flexbox-container"&gt;
    &lt;div&gt;
      &lt;svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5"&gt;
        &lt;title&gt;We Will Not Be Silent&lt;/title&gt;
        &lt;g&gt;
          &lt;path d="M73.3,13H95l7.8,41.4L114.3,13h21.6l11.5,41.4L155.2,13h21.6L160.5,87H138.1l-13-46.6L112.2,87H89.7Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M285.9,13h21.7l7.8,41.4L326.9,13h21.6L360,54.4,367.8,13h21.6L373.1,87H350.7l-13-46.6L324.8,87H302.3Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M289.1,174.2q0-18.1,10.1-28.2t28.1-10.1q18.5,0,28.5,9.9t10,27.8q0,13-4.4,21.3a31.1,31.1,0,0,1-12.6,12.9q-8.3,4.6-20.6,4.6t-20.7-4a31.2,31.2,0,0,1-13.3-12.6Q289.1,187.2,289.1,174.2Zm22.9.1q0,11.2,4.2,16.1t11.3,4.9q7.4,0,11.4-4.8t4-17.2q0-10.5-4.2-15.3t-11.4-4.8a13.9,13.9,0,0,0-11.1,4.9Q312,163,312,174.3Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M23.5,261.2H66.3q10.7,0,16.4,5.3a17.2,17.2,0,0,1,5.7,13.1,16.6,16.6,0,0,1-4.1,11.3,18.2,18.2,0,0,1-8,4.9q8,1.9,11.7,6.6a18.1,18.1,0,0,1,3.8,11.7,20.2,20.2,0,0,1-2.7,10.4,19.7,19.7,0,0,1-7.3,7.3,24.2,24.2,0,0,1-8.7,2.4,100,100,0,0,1-10.3,1H23.5Zm23.1,29h9.9q5.4,0,7.4-1.8a6.7,6.7,0,0,0,2.1-5.3,6.3,6.3,0,0,0-2.1-5q-2.1-1.8-7.3-1.8H46.6Zm0,29.1H58.3q5.9,0,8.3-2.1a7.1,7.1,0,0,0,2.4-5.6,6.5,6.5,0,0,0-2.4-5.3q-2.4-2-8.4-2H46.6Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M209.1,310.8l21.8-1.4q.7,5.3,2.9,8.1,3.5,4.5,10.1,4.5,4.9,0,7.5-2.3a6.9,6.9,0,0,0,2.7-5.3,6.8,6.8,0,0,0-2.5-5.2q-2.5-2.3-11.7-4.3-15-3.4-21.5-9a18.1,18.1,0,0,1-6.5-14.3,19.4,19.4,0,0,1,3.3-10.8,21.9,21.9,0,0,1,9.9-8q6.6-2.9,18.2-2.9,14.2,0,21.6,5.3t8.9,16.8l-21.6,1.3q-.9-5-3.6-7.3t-7.6-2.3q-4,0-6,1.7a5.2,5.2,0,0,0-2,4.1,4.1,4.1,0,0,0,1.7,3.2q1.6,1.5,7.7,2.7,15,3.2,21.5,6.5a22.6,22.6,0,0,1,9.4,8.2,20.8,20.8,0,0,1,3,11,23.5,23.5,0,0,1-3.9,13.1,24.6,24.6,0,0,1-11,9.1q-7.1,3.1-17.8,3.1-18.9,0-26.2-7.3A28.7,28.7,0,0,1,209.1,310.8Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M471.8,261.2h21.4l27.9,41v-41h21.6v74H521.1l-27.7-40.6v40.6H471.8Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
          &lt;path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/&gt;
        &lt;/g&gt;
      &lt;/svg&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you have any idea why this occurs I would be appreciative.</p>