Responsive fit to box SVG using VH expressed height

Question

I would like to be able to fit my SVG graph to my div in the way aspectratio is ignored (fit to screen). However, when I change the window width, my chart goes out of my yellow box. How can I correct this keeping using a vh-expressed div height ?

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 60vh;
  /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
  background-color: yellow;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

<div class="container-fluid" data-ng-swipe-left="showMenu.value = true" data-ng-swipe-disable-mouse="">
  <div aw-resolve-loader="" ui-view="main" class="view reveal-animation ng-scope">
    <div style="float: left" class="ng-scope"></div>
    <div class="ng-scope ng-isolate-scope">
      <div class="svg-container">
        <svg viewBox="0 0 800 600" preserveAspectRatio="none">
          <path class="line" d="M0,600L114.28571428571428,300L228.57142857142856,562.5L457.1428571428571,225L571.4285714285714,375L800,0"></path>
        </svg>
      </div>
    </div>
  </div>
</div>

Here is my plunker: http://plnkr.co/edit/Ea7AK6kkvAVf8KIsnZwQ

Answer 1

The problem is because you are assigning a height in viewport units only to the container but not the actual SVG element. Because of this, the height of your container always remains responsive (as 60vh) but height of the svg element changes depending on the width and the viewBox settings. This makes part of your SVG get clipped due to overflow: hidden on the container element.

You can verify the above by removing overflow: hidden from the container and adding a border to the SVG element.

To fix this issue, just add the below CSS properties to your svg element. This would make sure that the SVG is always only as big as the container.

svg {
  width: 100%;
  height: 100%;
}

.svg-container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 60vh;  /* aspect ratio */
  vertical-align: top;
  overflow: hidden;
  background-color: yellow;
}
svg {
  width: 100%;
  height: 100%;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
  border: 1px solid;
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

<div class="container-fluid" data-ng-swipe-left="showMenu.value = true" data-ng-swipe-disable-mouse="">
  <!-- uiView: main -->
  <div aw-resolve-loader="" ui-view="main" class="view reveal-animation ng-scope">
    <div style="float: left" class="ng-scope"></div>
    <div class="ng-scope ng-isolate-scope">
      <div class="svg-container">
        <svg viewBox="0 0 800 600" preserveAspectRatio="none">
          <path class="line" d="M0,600L114.28571428571428,300L228.57142857142856,562.5L457.1428571428571,225L571.4285714285714,375L800,0"></path>
          <!--rect x="50" y="200" width="250" height="40" /-->
        </svg>
      </div>
    </div>
  </div>
</div>

---

Another possible option would be to set the parent container to display: block and then set the required dimensions directly to the svg element.

.svg-container {
  display: block;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  background-color: yellow;
}
svg{
  width: 100%;
  height: 60vh; /* aspect ratio */  
}

.svg-container {
  display: block;
  position: relative;
  vertical-align: top;
  overflow: hidden;
  background-color: yellow;
}
.svg-content-responsive {
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 0;
}
svg {
  width: 100%;
  height: 60vh;  /* aspect ratio */
}
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

<div class="container-fluid" data-ng-swipe-left="showMenu.value = true" data-ng-swipe-disable-mouse="">
  <!-- uiView: main -->
  <div aw-resolve-loader="" ui-view="main" class="view reveal-animation ng-scope">
    <div style="float: left" class="ng-scope"></div>
    <div class="ng-scope ng-isolate-scope">
      <div class="svg-container">
        <svg viewBox="0 0 800 600" preserveAspectRatio="none">
          <path class="line" d="M0,600L114.28571428571428,300L228.57142857142856,562.5L457.1428571428571,225L571.4285714285714,375L800,0"></path>
          <!--rect x="50" y="200" width="250" height="40" /-->
        </svg>
      </div>
    </div>
  </div>
</div>