How can I make an SVG in HTML fit into a single screen without scrolling?

I have a bottle shape that I designed in Figma and exported as an SVG tag element, which I want to display on a webpage such that it's centered and fills the screen as much as possible (preserving aspect ratio) but does not result in any scrollbars. I tried implementing the 100% width and height properties as directed by Making inline svg fill whole screen, but that results in the SVG filling the width of the screen but extending the height to require a vertical scrollbar. I've also read How to make SVG appear without scroll bars in html, but I don't understand how to use embed or whether it's even possible to do so when my SVG is defined within the HTML document itself. What do I need to change?

My current code is:

<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head>
<style>
.container {display: flex; justify-content: center;}
</style>
</head>
<body style="width:100%;height:100%;margin:0;">

<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>

</body>
</html>

Here is what I had before implementing 100% height and width properties on the html, body and svg tags (also margin on the body), just taking the raw output from Figma and putting it in a flexbox with center justification:

<!DOCTYPE html>
<html>
<head>
<style>
.container {display: flex; justify-content: center;}
</style>
</head>
<body>

<div class="container">
<svg width="250" height="457" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>

</body>
</html>

Below is with 100% height and width but without the viewBox property, which truncates the SVG—I don't understand why eliminating viewBox cuts off the graphic:

<!DOCTYPE html>
<html style="width:100%;height:100%;">
<head>
<style>
.container {display: flex; justify-content: center;}
</style>
</head>
<body style="width:100%;height:100%;margin:0;">

<div class="container">
<svg width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
<path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>

</body>
</html>

Solution

Give your SVG a display of block and set its height with CSS. Using dvh units will make the element dynamically adjust to the height of the device.

* {
  margin: 0;
  box-sizing: border-box;
}

.container {
  justify-items: center;
}

svg {
  display: block;
  height: 100dvh;
}

<div class="container">
  <svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
    <path d="M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
  </svg>
</div>