scale svg in flex item to match height of flex container and preserve aspect ratio

Question

I want to have an SVG next to a div with some text.
The SVG should preserve its aspect ratio while scaling to match the height of the parent.
The parent should only be tall enough to fit the text in the other flex item.
I would like to make this a component that will be reusable with different amounts of text.

I have tried a few approaches, and the closest I have gotten that keeps the SVG from disappearing in Chrome is in this codepen: https://codepen.io/rosshathaway/pen/ExjePpM. The problem is the SVG is taking up as much space as possible. CSS:

* {
  box-sizing: border-box;
}

.outer {
  display: flex;
}

.inner {
  margin: 4px;
  border-top: dotted 8px black;
  border-right: dotted 8px black;
  border-bottom: dotted 8px black;
  padding: 0.5em 2em;
}

.logo {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
}

svg {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}

HTML:

<div class="outer">
  <div class="logo">
    <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 93 93"
  preserveAspectRatio="xMidYMid meet"
>
  <g
    transform="translate(0, 93) scale(0.100000,-0.100000)"
    fill="#231f20"
    stroke="none"
  >
    <path
      d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
    />
    <path
      d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
    />
    <path
      d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
    />
  </g>
</svg>
  </div>
  <div class="inner">
    A few <br>
    lines <br>
    of text <br>
    bla bla bla bla bloop <br>
    aADSF<br>
    gljsdf
  </div>
</div>

Thanks.

Ezra Siton · Answer 1 · 2020-03-22T11:59:30.060

In general this is not specific SVG issue.

Issue 1 - "remove the aspect ratio CSS trick"

padding-bottom: 100%; is a trick for 1:1 Aspect Ratio box - in your case the `svg1 icon is already a square (So remove those extra styles) https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

Issue 2

You set two cols - one with text and one with image.

The flex-basis property specifies the initial length of a flexible item. https://www.w3schools.com/cssref/css3_pr_flex-basis.asp

flex-basis by deafult is auto.

auto ==> The browser will calculate and select a width for the specified element (width mdn docs). So the result looks "buggy"(huge image and small col of text):

* {
  box-sizing: border-box; 
}

.outer {
  display: flex;
  border: dotted 8px red;
}

.inner {
}

.logo {
  width: 100%;;
  height: auto;
}

<div class="outer">
  <div class="logo">
    <svg
  version="1.0"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 93 93"
  preserveAspectRatio="xMidYMid meet"
>
  <g
    transform="translate(0, 93) scale(0.100000,-0.100000)"
    fill="#231f20"
    stroke="none"
  >
    <path
      d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
-166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
13 151 2 203 -21z"
    />
    <path
      d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
    />
    <path
      d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
-137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
    />
  </g>
</svg>
  </div>
  <div class="inner">
    A few <br>
    lines <br>
    of text <br>
    bla bla bla bla bloop <br>
    aADSF<br>
    gljsdf
  </div>
</div>

one solution - add `flex-grow: 1;` to text-col

flex-grow: 1; - The element will grow by a factor of 1. It will fill up the remaining space if no other flexbox item has a flex-grow value. https://cssreference.io/property/flex-grow/

For the svg add any width you want (20%, 100px or 20em).

.flex-container {
  display: flex;
  border: 1px dashed orange;
}
#col1{
  max-width: 100%;
  border: 3px dashed violet;
}
#col2{
  border: 2px dashed blue;
  flex-grow: 1;
}
svg {
  height: auto;
  width: 150px;
}

  <section class="flex-container">
    <div id="col1">
      <svg
    version="1.0"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 93 93"
    preserveAspectRatio="xMidYMid meet"
  >
    <g
      transform="translate(0, 93) scale(0.100000,-0.100000)"
      fill="#231f20"
      stroke="none"
    >
      <path
        d="M0 465 l0 -465 465 0 465 0 0 465 0 465 -465 0 -465 0 0 -465z m598
  285 c62 -28 136 -101 163 -164 30 -68 31 -180 1 -248 -71 -160 -268 -237 -423
  -166 -78 35 -124 80 -160 154 -27 54 -32 76 -32 134 0 145 102 273 248 311 47
  13 151 2 203 -21z"
      />
      <path
        d="M270 455 l0 -195 200 0 200 0 0 195 0 195 -200 0 -200 0 0 -195z
  m360 0 l0 -155 -160 0 -160 0 0 155 0 155 160 0 160 0 0 -155z"
      />
      <path
        d="M397 550 c-31 -25 -51 -80 -42 -119 15 -68 102 -109 164 -77 36 19
  71 70 71 104 0 31 -25 77 -52 96 -33 23 -109 21 -141 -4z m129 -33 c55 -48 20
  -137 -55 -137 -74 0 -109 83 -56 135 31 32 75 32 111 2z"
      />
    </g>
  </svg>
  <br>
   width: 150px;
    </div>
    <div  id="col2" class="col">
      A few <br>
      lines <br>
      of text <br>
      bla bla bla bla bloop <br>
      aADSF<br>

     
      </p>
      gljsdf
    </div>
  </section>

Related stackoverflow Q:

Make div fill remaining *horizontal* space in flexbox

Thank you Ezra. What you have here is an improvement visually, but what I was trying to do was have the height of the flex container be the minimum height needed to fit the flex item with text (#col2 in your example). Then, the SVG would expand its height to be as tall as the flex container and scale up its width proportionally to preserve its aspect ratio. Please let me know if I need to explain better. — mmmm, Mar 23 '20 at 01:11
The right col height changed related to the content (put article inside or one word). Change the height of the svg to 100% and width auto. But the layout give you mega icon if you put a lot of content on the right col. This is simple design issue not related to code. — Ezra Siton, Mar 23 '20 at 06:45
I tried changing height of svg to 100% and width to auto, but I did not get the desired behavior. I want the height to be limited to what is necessary to fit the text. I got some odd behavior when I made the change, so I tried JSFiddle: https://jsfiddle.net/1jzceLsa/ instead of Codepen. It looks like the odd behavior is in Chrome, but not Firefox. In Chrome, the SVG will increase in size when I increase the window size and the SVG does not scale back down when decreasing window size. — mmmm, Mar 23 '20 at 16:29

mmmm · Answer 2 · 2020-04-08T07:57:25.513

0

I ended up making a new SVG that includes the border. This will scale properly, but the size of the dots for the border and the space between them will change instead of making or removing dots that are the original size like the CSS border would do.

edited Apr 08 '20 at 07:57

answered Apr 03 '20 at 16:04

mmmm

607
6
14

scale svg in flex item to match height of flex container and preserve aspect ratio

2 Answers2

one solution - add flex-grow: 1; to text-col

one solution - add `flex-grow: 1;` to text-col