Responsive 3*3 square div grid without scroll bars - html

Question

I want to have a responsive 9x9 div grid with no scrollbar. The div grid should resize according to the visible browser window. I've combined "How to maintain the aspect ratio of a div using only CSS" with "Grid of responsive squares":
html
<div class="stretchy-wrapper">
<div class="inner">
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
98%
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
<div class="square">
<div class="content">
<div class="table">
<div class="table-cell numbers">
3.9/5
</div>
</div>
</div>
</div>
</div>
</div>
css
#import url(http://fonts.googleapis.com/css?family=Lato:400,900); /* <-- Just for the demo, Yes I like pretty fonts... */
.square {
float:left;
position: relative;
width: 30%;
padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
margin:1.66%;
background-color:#1E1E1E;
overflow:hidden;
}
.content {
position:absolute;
height:90%; /* = 100% - 2*5% padding */
width:90%; /* = 100% - 2*5% padding */
padding: 5%;
}
.table{
display:table;
width:100%;
height:100%;
}
body {
font-size:20px;
font-family: 'Lato',verdana, sans-serif;
color: #fff;
text-align:center;
background:#ECECEC;
}
.numbers{
font-weight:900;
font-size:100px;
}
div.stretchy-wrapper {
width: 100%;
padding-bottom: 56.25%; /* 16:9 */
position: relative;
background: lightgrey;
}
div.stretchy-wrapper > .inner {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
color: white;
font-size: 24px;
text-align: center;
}
However the divs still get expanded to maximum width which causes scroll bars: Fiddle.
What is the css trick that the divs are only expanded to the maximum visible width or height? So I don't get scroll bars?

Answer 1

Solved it with Flexbox and vmin
css
.container {
margin: 0 auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
align-content: space-around;
height: 93vmin;
width: 93vmin;
background: lightgrey;
}
.cell {
height: 30vmin;
width: 30vmin;
background-color:#1E1E1E;
}
html
<div class="container">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
Full Screen Fiddle
Fiddle
Recommended read about flexbox