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.

Answer 1

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.

Answer 2

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