CODEWITHSUNDEEP
csssvgflexbox
Bram Roets
Bram Roets

Reputation: 13

SVG with height 100% will never shrink below 150px

I'm trying to create a SVG which stretches (in height) to a paragraph with variable height next to it.

Currently I have the following working example code which works as long if the paragraph is bigger then 150px. As soon as the paragraph is less in height, the SVG stops shrinking.

<div style="display: flex">
  <div>
    <svg style="display:block;width: 40px;height:100%">
      <line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
    </svg>
  </div>
  <div style="height: 300px;border:1px solid">
    This paragraph is 300px, the svg will stretch accordingly
  </div>
</div>

<br><br><br><br>

<div style="display: flex">
  <div>
    <svg style="width: 40px;height:100%">
      <line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
    </svg>
  </div>
  <div style="height: 50px;border:1px solid">
    This paragraph is 50px, the svg will not shrink below 150px
  </div>
</div>

This can't be solved with javascript, it should be responsive. the SVG is in practice a lot more complicated and cannot be replaced with a simple border-left: 1px solid black

Upvotes: 1

Views: 2686

Answers (3)

Eric
Eric

Reputation: 1613

This example has a different setup from yours, but it still addresses the issue of the SVG not shrinking below 150px:

The html...

    <div class='parent'>
      <svg class='my-svg'>
        <rect class='my-rect'></rect>
      </svg>
    </div>

And the css...

.my-rect {
  fill: red;
  width: 100%;
  height: 100%;
}

.my-svg {
  width: 100%;
  height: 100%;
}

.parent {
  position: absolute;
  width: 80%;
  height: 80%;
}

You can play with the working example here: https://jsfiddle.net/k93rLvzg/98/

The key is the absolutely positioned div element housing the SVG. The SVG will shrink below 150px if the parent also is below 150px.

I actually don't know the reason for this, and it'd be great if someone could explain it.

Upvotes: 0

ibrahim tanyalcin
ibrahim tanyalcin

Reputation: 6491

  • Set your viewBox accordingly, I do not know the userSpaceOnUse (min x min y width height) of your SVG, let's say viewBox="0 0 100 100".

  • Remove width and height attributes.

  • Set the style attribute to 100% width and 100% height.

  • override the default xMidYMid value by setting preserveAspectRatio="none"

Resulting svg should look like this:

<svg preserveAspectRatio="none" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101820

SVGs like other replaced elements have a default size of 300x150. If they don't have enough information to calculate their width or height, they will report their default width (300) or height (150)

For your first example div, when the browser is trying to calculate its height, it will ask the first child what its height is. It will report a default of 150px (from the SVG). The second child will report 300px. So the browser will set that first div to 300px. This is the greater of its two children.

In the second div, the same process will be followed. This time the max height will be the default height of the SVG (150px) since that is larger than the other child (50px). So that section will end up at a height of 150px.

To fix this, you don't have much choice other than giving the SVG a specific height, rather than using a percentage.

<svg style="width: 40px; height:50px">

Demo:

<div style="display: flex">
  <div>
    <svg style="display:block;width: 40px;height:100%">
      <line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
    </svg>
  </div>
  <div style="height: 300px;border:1px solid">
    This paragraph is 300px, the svg will stretch accordingly
  </div>
</div>

<br><br><br><br>

<div style="display: flex">
  <div>
    <svg style="width: 40px; height:50px">
      <line x1="20" y1="0" x2="20" y2="100%" stroke-width="1" stroke="black"></line>
    </svg>
  </div>
  <div style="height: 50px;border:1px solid">
    This paragraph is 50px, the svg will not shrink below 150px
  </div>
</div>

Upvotes: 1

Related Questions