Child is same size as parent, but scroll appears

Issue

I am adding a new widget with SVG in it.

I am making it same size as parent, but it results in unwanted scroll to appear.

Fiddle: https://jsfiddle.net/Murval/j1oe6x4b/

.widget-outer {
  display: flex;
  height: 210px;
  width: 400px;
  border: 1px solid black;
}

.widget {
  overflow-y: auto;
  flex: 1;
}

.svg-container {
  text-align: center;
  display: inline-block;
  width: 100%;
  height: 100%;
}

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

<div class="widget-outer">
  <div class="widget">
    <div class="svg-container">
      <svg class="svg" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50" style="fill: gray;"></circle>
      </svg>
    </div>
  </div>
</div>

As I see, the scroll appears, because there is extra space below svg-container div. But changing display, as was suggested in other posts, has no effect.

Extra considerations:

• I don't want to change styles for widget-outer and widget classes, because they are working fine for other widgets. overflow-y: auto on widget class is required, becuase some other widgets have longer content that should be scrollable.
• I want svg element to take all available space in widget for any combination of height and width on widget-container.
• Decreasing max-height of svg element is helping, but can not be counted as proper solution to this problem.

tl;dr Is it possible to fit svg in widget without scrollbar?

Solution

You need to change both .svg-container and .svg to display: block

.widget-outer {
  display: flex;
  height: 210px;
  width: 400px;
  border: 1px solid black;
}

.widget {
  overflow-y: auto;
  flex: 1;
}

.svg-container {
  text-align: center;
  width: 100%;
  height: 100%;
}

.svg {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

<div class="widget-outer">
  <div class="widget">
    <div class="svg-container">
      <svg class="svg" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="50" style="fill: gray;"></circle>
      </svg>
    </div>
  </div>
</div>

Answered By - Turnip