0

I have an SVG constrained to 30% inside a flexbox:

<body style="height: 100vh;">
  <div style="display: flex; flex-direction: column; height: 100%;">
    <svg style="flex-basis: 30%" width="100%" height="100%" viewBox="0 0 100 100">      
      <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
    </svg>
    <div style="flex-basis: 70%; background-color: orange;">
      flex-basis: 70%
    </div>
  </div>
</body>

But when I put that SVG inside a div constrained to 30% the SVG takes all the space:

<body style="height: 100vh;">
  <div style="display: flex; flex-direction: column; height: 100%;">
    <div style="flex-basis: 30%;">
      <svg width="100%" height="100%" viewBox="0 0 100 100">      
        <ellipse cx="50" cy="50" rx="50" ry="50"></ellipse>
      </svg>
    </div>    
    <div style="flex-basis: 70%; background-color: orange;">
      flex-basis: 70%
    </div>
  </div>
</body>

How can I constrain the SVG to the parent div's height in the second example?

(I've tried setting style="height: 100%" on the SVG in the second example as a shot in the dark but without success.)

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
mmm111mmm
  • 3,607
  • 4
  • 27
  • 44
  • 1
    min-height: 0; to the div of the SVG – Temani Afif Aug 01 '20 at 13:26
  • 1
    `flex-basis: 30%` means take all available space, but minimally 30%, otherwise 'wrap' (when parent wrap is enable, otherwise 'overflow'). In the 2nd demo change `flex-basis` to `width` (or `max-width`) and it should work. – Rene van der Lende Aug 01 '20 at 13:27
  • Thanks @RenevanderLende. It appears I didn't understand what flex-basis meant. – mmm111mmm Aug 01 '20 at 13:31
  • And yes @TemaniAfif that works also. I've chosen to use 'width' instead. – mmm111mmm Aug 01 '20 at 13:31
  • @RenevanderLende flex-basis doesn't mean take all the available space. Flex-basis define the initial height to 30% but due to the default min-height constraint the final height is bigger. Also note that flex-grow is by default 0 so the element should not grow past 30% https://jsfiddle.net/08nbkezv/ – Temani Afif Aug 01 '20 at 13:35
  • please don't add the answer inside the question. A question need to remain a quesiton – Temani Afif Aug 01 '20 at 13:37
  • I tried to answer it, yet couldn't. I don't feel the linked answer really answers my question since my problem came from a misunderstanding of flex-basis. – mmm111mmm Aug 01 '20 at 13:39
  • the problem is not with flex-basis but a min-height issue like I said in my comment and the duplicate explain this very well. Using height is another alternative to achieve the same but it doesn't fix your actual issue. – Temani Afif Aug 01 '20 at 13:46
  • @Temani Afif, I will need to revisit the W3C specs again, I guess. Thanks for the heads up... – Rene van der Lende Aug 01 '20 at 15:36

0 Answers0