使内容适应屏幕尺寸而无需滚动

Question

我正在编写代码，以测试由多行框组成的页面，这些页面要适合屏幕尺寸，因此在任何设备上都不需要滚动，从而可以每次看到所有元素。

除了一些mediaquery之外，我还在使用vw和vh，但无法达到目标。到目前为止，这就是我编写的代码。

#app {

        display: flex;
        flex-wrap:wrap;
        height: 100%;
        width: 100vw;
        justify-content: center;

    }
    .box {
        width: 15vw;
        /*height: 15vh;*/
        flex-shrink: 3;

        background: #dddddd;
        border-radius: 5px;
        padding: 6px 5px 6px 5px;
        position:relative;
        border: 1px solid green ;
        margin-left: 15px;
        margin-top: 15px;
        font-size:1vw;
    }

@media only screen and (min-width: 2000px) {  
    .box {
        font-size: 1vw;
    }
}
@media only screen and (max-width: 1300px) {  
    .box {
        font-size: 1.5vw;
    }
}
@media only screen and (max-width: 950px) {

    .box {
        font-size: 2vw;
    }
}
@media only screen and (max-width: 768px) {  
    .box {
        font-size: 2.5vw;
    }
}
@media only screen and (max-width: 500px) {   
    .box {
        font-size: 3vw;
    }
}
@media only screen and (max-width: 600px) { 
    .box {
        font-size: 3vw;
    } 
}

这是当前状态，正在小型设备或笔记本电脑上滚动-> https://jsfiddle.net/3cqo0a6v/