htmlcsssvgresponsive-designresize

Resizing of svg leads to additional height

I have an interactive svg and tried to make it responsive with viewbox and display: flex:

// HTML
<div className="interactive-svg">
  <svg ref={svgRef} viewBox={`0 0 ${svgWidth} ${svgHeight}`} />
</div>



// CSS-Styles
.interactive-svg {
  display: flex;
  justify-content: center;
  align-items: center;
  svg {
    user-select: none;
    cursor: cell;
  }
}

But if I shrink the windowsize the svg seems to gain height that should not be there: enter image description here

If I inspect the element I see that it automatically sets a height and width. If I remove it in the inspector the desired effect occurs:

enter image description here

How to specify that in HTML/CSS to get the desired effect meaning that the "rectangular"-svg preserves Is it because of flex?

Solution

  • Flexbox is the reason you need to (re)set width and height explicitly for child svg:

    .interactive-svg svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
  cursor: cell;
}