scale text to fit container size

by Felis Catus

HTML

<div class="kotainer">
    <svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="none">
        <foreignobject x="10" y="10" width="480" height="90">
            <div class="kotainee">
                hello, world!
            </div>
        </foreignobject>
    </svg>
</div>
<div class="kotainer">
    <svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet">
        <foreignobject x="10" y="10" width="480" height="90">
            <div class="kotainee">
                hello, world!
            </div>
        </foreignobject>
    </svg>
</div>
<div class="kotainer short">
    <svg width="100%" height="100%" viewBox="0 0 500 100" preserveAspectRatio="xMinYMin meet">
        <foreignobject x="10" y="10" width="480" height="90">
            <div class="kotainee">
                hello, world!
            </div>
        </foreignobject>
    </svg>
</div>

CSS

.kotainer {
    width: 60%;
    height: 200px;
    border: 1px solid teal;
}
.kotainee {
    font-size: 80px;
}
.kotainer.short {
    height: 50px;
}