无法将所有卡片放入视点中的一列（适合屏幕而不滚动）

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/