Table resizing in Flex, while maintaining aspect ratio, how?

Question

I have a table, that has the same amount of columns as rows (13*13). I would like to make it so that when I resize the window, the width and height of the cells should scale, while maintaining the aspect ratio of the cell, independently of screen aspect ratio. How could this be done?

Here is a screenshot of the problem: https://i.stack.imgur.com/i4Ort.jpg

I have made this in 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;
}

Check this out: http://stackoverflow.com/questions/20456694/grid-of-responsive-squares/20457076#20457076 — pan.goth, Feb 23 '17 at 14:06

Andrei Fedorov · Accepted Answer · 2017-02-23T14:25:28.393

* {
  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>

Table resizing in Flex, while maintaining aspect ratio, how?

1 Answers1