在Flex中調整表的大小，同時保持寬高比，如何？

Question

我有一個表，它有相同數量的列作爲行（13 * 13）。我想這樣做是爲了在調整窗口大小時，單元格的寬度和高度應該縮放，同時保持單元格的縱橫比，而與屏幕縱橫比無關。這怎麼能做到？

這是問題的一個截屏：http://i.imgur.com/FWzj5R8.jpg

我已經在Flex中做出這樣的：

.result-test table{ 
    width: 100%; 
} 
.result-test table tr{ 
    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal; 
    box-orient: horizontal; 
    flex-direction: row; 
    -webkit-box-pack: center; 
    -moz-box-pack: center; 
    box-pack: center; 
    justify-content: center; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    box-align: center; 
    align-items: center; 
    background-color: red; 
} 
.result-test table td{ 
    background-color: white; 
    user-select: none; 
    text-align:center; 
    vertical-align:middle; 
    height: 30px; 
    width: 30px; 
    font-weight: bold; 
    padding: 4px; 
    -webkit-box-flex: 1; 
    -moz-box-flex: 1; 
    box-flex: 1; 
    -webkit-flex: 1 1 auto; 
    flex: 1 1 auto;  
} 
.result-test table td p{ 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    box-align: center; 
} 

Answer 1

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.container { 
 
    display: inline-flex; 
 
    flex-wrap: wrap; 
 
    border-bottom: .1vw solid black; 
 
    border-right: .1vw solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
.row { 
 
    white-space: nowrap; 
 
} 
 

 
.row div { 
 
    width: 7vw; 
 
    height: 7vw; 
 
    border: .1vw solid black; 
 
    border-bottom: none; 
 
    border-right: none; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    </div>