Невозможно уместить все карты в столбце с точки зрения обзора (уместить экран без прокрутки)

Question

У меня есть простая веб-страница с 12 карточками с графиками внутри тела карточки.Я хочу спроецировать эту страницу на большой экран и показать все 12 карт в точке обзора, чтобы нам не нужно было прокручивать и все карты были бы видны на экране.Я попытался установить vh, vw на 100%, а также максимальную ширину и высоту на 100%, а также обернуть столбцы карты, но ни одна из них, похоже, не работает.Либо я должен прокручивать вертикально или горизонтально, чтобы просмотреть все графики.Может кто-нибудь указать мне правильное направление, чтобы решить эту проблему?

    <div class="vw-100 vh-100">
        <div class="card-columns vw-100">
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="mixed-chart"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart2"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart3"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart4"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div> 
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart5"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart6"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart7"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart8"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart9"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart10"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart11"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
            <div class="card bg-transparent">
                <div class="card-header">Header</div>
                <div class="card-body"><canvas id="bar-chart12"></canvas></div> 
                <div class="card-footer">Footer</div>
            </div>
        </div>
    </div>


</body>

https://jsfiddle.net/anilbhrth/ogmvn07e/5/