SVG escala a lo largo de otros contenidos con FlexBox CSS

votos
0

Quiero mostrar un SVG rectangular entre dos DIVs alineados verticalmente, de modo que el SVG ocupa tanto espacio como sea posible (pero mantiene su relación de aspecto). A medida que el SVG sí se genera dinámicamente, tengo que utilizar la <svg>etiqueta HTML para incluir (y es decir, no se puede utilizar una <img>etiqueta).

Así que traté de usar FlexBox, pero el SVG no se adhiere a las normas y se hace demasiado grande:

html, body, .parent {
  height: 100%;
}

.parent {
  display: flex;
  flex-flow: column nowrap;
}

.contentSVG {
  flex-grow: 1;
}
<div class=parent>
  <div class=contentA>
    content A
  </div>
  <div class=contentSVG>
    <!-- arbritrary SVG -->
    <svg viewBox=0 0 10 10>
      <circle cx=5 cy=5 r=5 fill=red />
    </svg>
  </div>
  <div class=contentB>
    content B
  </div>
</div>

Si sustituye el SVG con algún otro tipo de contenido del ejemplo funciona como se esperaba.

¿Tiene alguna idea de cómo puedo realizar esto sin ningún JS involucrados?

Publicado el 09/10/2019 a las 18:56
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
1

Es necesario añadir width:100%;height:100%a la SVG y min-height:0al padre para permitir que el efecto de contracción

html, body, .parent {
  height: 100%;
  margin:0;
}

.parent {
  display: flex;
  flex-flow: column nowrap;
}

.contentSVG {
  flex-grow: 1;
  min-height:0;
}
svg {
  width:100%;
  height:100%;
}
<div class="parent">
  <div class="contentA">
    content A
  </div>
  <div class="contentSVG">
    <!-- arbritrary SVG -->
    <svg viewBox="0 0 10 10">
      <circle cx="5" cy="5" r="5" fill="red" />
    </svg>
  </div>
  <div class="contentB">
    content B
  </div>
</div>

Respondida el 09/10/2019 a las 19:03
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more