Inline SVG Disappears with Flexbox

Question

I am trying to center an inline SVG element both vertically and horizontally using Flexbox. For some reason when I display: flex on the parent container, the inline SVG just disappears.

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <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"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

If you have any idea why this occurs I would be appreciative.

Asons · Accepted Answer

Your SVG doesn't have an internal width/height set.

You can either do it in the SVG, <svg width="200" height="150" ...</svg>, or with a CSS rule

.flexbox-container svg {
  width: 100%;
}

Stack snippet

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexbox-container svg {
  width: 100%;
}

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <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"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

If you expect the SVG to be centered both horizontally and vertically, the flex container need a height, i.e. full viewport, 100vh

Stack snippet

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.flexbox-container svg {
  width: 100%;
}

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <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"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

It appears using CSS width: 100% with percent doesn't render the same on Firefox as it does on i.e Chrome, but using an internal width="..." in the SVG does.

Src: SVG Spec: missing documentation: the “Viewport” (and <svg width=”…”>)

Stack snippet

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

<div class="flexbox-container">
  <div>
    <svg width="220" id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <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"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

As the SVG's internal width is "pixel", you can of course use px in the CSS.

Stack snippet

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.flexbox-container svg {
  width: 220px;
}

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <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"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

Obsidian Age · Answer

The problem is that you didn't tell the child <div> element to grow.
You can do that with flex-grow: 1, or the shorthand flex: 1 0 auto (where the first value is flex-grow, the second value is flex-shrink and the third value is flex-basis).

I've added flex-grow on .flexbox-container > div to the following example:

body {
  background-color: #000;
  margin: 0;
  border: 0;
  outline: 0;
}

.flexbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexbox-container > div {
  flex-grow: 1;
}

<div class="flexbox-container">
  <div>
    <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 598.6 323.5">
      <title>We Will Not Be Silent</title>
      <g>
        <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"/>
        <path d="M184.3,13h61.3V28.8H207.2V40.6h35.6V55.7H207.2V70.3h39.5V87H184.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M397.8,13h22.9V87H397.8Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M437.1,13H460V68.8h35.7V87H437.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M506.1,13H529V68.8h35.7V87H506.1Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M206,137.1h21.4l27.9,41v-41h21.6v74H255.2l-27.7-40.6v40.6H206Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M370.3,137.1h69.5v18.3H416.5v55.7H393.6V155.4H370.3Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M103.9,261.2h61.3V277H126.8v11.8h35.6v15.1H126.8v14.6h39.5v16.8H103.9Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M288.7,261.2h22.9v74H288.7Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M328,261.2h22.9V317h35.7v18.2H328Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <path d="M397,261.2h61.3V277H419.9v11.8h35.6v15.1H419.9v14.6h39.5v16.8H397Z" transform="translate(-23.5 -13)" fill="#fff"/>
        <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"/>
        <path d="M552.6,261.2h69.5v18.3H598.8v55.7H576V279.5H552.6Z" transform="translate(-23.5 -13)" fill="#fff"/>
      </g>
    </svg>
  </div>
</div>

Hope this helps :)

Inline SVG Disappears with Flexbox

Tags:

html

css

sass

flexbox

svg

Joel Hoelting

2 Answers

Asons

Obsidian Age

Recent Activity

Donate For Us

Inline SVG Disappears with Flexbox

Tags:

html

css

sass

flexbox

svg

Joel Hoelting

2 Answers

Asons

Obsidian Age

Related questions

Recent Activity

Donate For Us