Как я могу динамически изменять размер сетки divs, чтобы заполнить (но не превышать) размеры контейнера div?

Question

Я пытаюсь выполнить задание для проекта «Один». Целью является создание веб-страницы, подобной эскизу. Я получил прилично далеко, но я застрял, пытаясь динамически изменять размер сетки div.

У меня есть контейнер div, который я установил для 500x500px. Однако ничто из того, что я пробовал, имеет контейнерные divs, заполняющие пространство соответствующим образом. Я чувствую, что я пропускаю что-то тривиальное в CSS, но не могу понять, что.

CSS:

.outer { 
    width: 500px; 
    height: 500px; 
    position: absolute; 
} 

#gridtable { 
    width: 100%; 
    height: 100%; 
} 

.outtable { 
    background: #CCC; 
    min-height: 1%; 
    height: auto; 
    min-width: 1%; 
    width: auto; 
    position: absolute; 
    display: inline-block; 
} 

.newcolor { 
    background: blue; 
    min-height: 1%; 
    height: auto; 
    min-width: 1%; 
    width: auto; 
    position: absolute; 
    display: inline-block; 
} 

JSFiddle here.

Answer 1

вам необходимо установить свои элементы таблицы для заполнения доступной ширины, а также (т.е. 100%) в данный момент они по умолчанию минимального пространства, необходимого (это таблица по умолчанию)

.outer { 
    width: 500px; 
    height: 500px; 
    position: relative; 
    overflow: hidden; 
} 

#gridtable { 
    width: 100%; 
    height: 100%; 
} 

table, tbody, tr, td{ 
    width: 100%; 

} 
.intable{display: flex; } 
.intable td{} 
.outtable{ 
    background: #CCC; 
    min-height: 1%; 
    height: auto; 
    min-width: 100%; 
    width: auto; 
    position: absolute; 
    display: inline-block; 
} 

.newcolor { 
    background: blue; 
    min-height: 1%; 
    height: auto; 
    min-width: 100%; 
    width: auto; 
    position: absolute; 
    display: inline-block; 
} 

jsfiddle: http://jsfiddle.net/o4poarey/6/

Answer 2

Использование 100% не рх

<...width="100%" height="100%"...> 

вместо

<...width="100px" height="100px"...> 

поместить Также в таблицу и установить таблицу на 100%

<table style="width:100%"> 
    <tr> 
     <td><...width="100%" height="100%"...></td> 
    </tr> 
</table>