Question 42443 in Html Question posted in
Some basic documentation can be found here.

svg inside dev in flexbox overflowing and seems bigger than specified width and height – Html

The SVG box inside a div is the width and height of the div element it is in and i don’t know why. I am using flexboxes. I am using css or specifying directly the width and height specifically for all the elements which is why I am posting this question cause that is not working. I am trying for a 30 by 30 px svg inside a div that is 70 by 100 and it is overflowing and way bigger for whatever reason.

html

<html>
<body>
<div class="wrapper">
     <div class="div left-1" id="drawArea">  
         <svg class="test" width:"30px" height:"30px" viewbox=viewBox="0 0 30 30"> 
         </svg>
     </div>
    <div class="div right-1">2</div>         
    <div class="div left-2" >3</div>  
    <div class="div right-2">4</div>
  </div>
</body>
</html>

CSS

.wrapper {display: flex;  flex-wrap: wrap; font-weight: bold;  text-align: center; width:170px; height:200px}
.left-1 {flex-basis: 70px;  background: yellow;}
.right-1 {flex-basis: 100px;  background: deepskyblue;}
.left-2 {flex-basis: 70px;  background: hotpink;}
.right-2 {flex-basis: 100px;  background:  BlueViolet;}
.test {background: black;}

Also see codepen. The black blox is the svg area
https://codepen.io/sumo_suzy/pen/MWPJWmv

Having done some more testing I realize this has nothing to do with me using flex box but the size of the svg area doesn’t seem to change no matter what I put in for width or height (and i have tried with viewbox too)

See this codepen

https://codepen.io/sumo_suzy/pen/dygNPrN

Tags:

3

Answers


  1. 0

    You have width:"30px" , replace it with width="30". Same for height
    Furthermore in your case you are not using svg, you could use a div rather than svg tag, indeed you can remove viewport attribute

    Login or Signup to reply.
  2. 0

    if you want to use svg you have to follow svg rules…

    see the snippet there after from yours. Mainly it’s "syntax" problems

    .wrapper {
  display: flex;
  flex-wrap: wrap;
  font-weight: bold;
  text-align: center;
  width: 170px;
  height: 200px
}

.left-1 {
  flex-basis: 70px;
  background: yellow;
}

.right-1 {
  flex-basis: 100px;
  background: deepskyblue;
}

.left-2 {
  flex-basis: 70px;
  background: hotpink;
}

.right-2 {
  flex-basis: 100px;
  background: BlueViolet;
}

.test {
  background: black;
}
    <div class="wrapper">
  <div class="div left-1" id="drawArea">
    <svg class="test" style="width:30px;height:30px" viewBox="0 0 30 30"></svg>
  </div>
  <div class="div right-1">2</div>
  <div class="div left-2">3</div>
  <div class="div right-2">4</div>
</div>
    Login or Signup to reply.
  3. 0

    The way works is not as straightforward as sometime one might think.

    See this for details.

    Basically, you want to scale your svg using css, so just add width and height properties to your class test css like the other answers have mentioned/done:

    .test {
   ...
   width: 30px;
   height: 30px;
}

    Then your svg should size just right.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search