Create responsive column of square items with flexbox

Question

Hei, im trying to create a simple responsive gameboard layout. Im using flexbox to keep it responsive and managed to to get it to work very nice in the big 2x7 and 7x7 game area. When page gets resized the "squares" get smaller and still maintain the correct their square look very nicely. I tried to apply the same method to create a sideboard what i would like to be 1x7 squares and also keep their "squarness" but when the width gets smaller the boxes start to expand out sideways.

@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');

body {
    margin: 0;
}

.game-container {
    display: flex;
    flex-direction: row;
    width: 100vw;
    //height: 90vh;
}

.game-area-container {
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    max-width: 75vh;
    width: 75vh;
    flex: 1;
}

.header-container {
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    min-width: 350px;
}

.gameboard-container {
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    min-width: 350px;
}

.progress-container {
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    max-width: min-content;
    flex: 1;
}

.score-container {
    border: 2px solid black;
    color: #acacac;
    text-align: center;
    font-family: 'Black Ops One', cursive;
    font-size: 2rem;
}

.levels-container {
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
    max-width: 10vh;
}

.level-box {
    flex: 1;
    margin: 2px;
    background: #E9D2FF;
}
  
.level-box:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}

.box {
    flex: 1 0 13%;
    margin: 2px;
    background: #E9D2FF;
}
  
.box:after {
    content: '';
    display: block;
    padding-bottom: 100%;
}


        
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                
            
            
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
                
            
        
        
            Score: 90000

Here's a codepen of my current solution: My current solution in codepen

user_8620333 · Answer

Here is a modified version of your code that should give you a better approximation. Still not perfect due to the text but you will always have square shapes. You will note the use the min() function, I have also replaced margin with white border to include them in the width and avoid overflow.

@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');
body {
  margin: 0;
}

.game-container {
  display: flex;
  flex-direction: row;    
  max-width: 90vh;
}

.game-area-container {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.header-container,
.gameboard-container {
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
}

.progress-container {
  border: 2px solid black;
  display: flex;
  flex-direction: column;
  max-width: min-content;
  flex: 1;
}

.score-container {
  border: 2px solid black;
  color: #acacac;
  text-align: center;
  font-family: 'Black Ops One', cursive;
  font-size: min(4vmin, 2rem);
}

.levels-container {
  border: 2px solid black;
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  height: 0;
  width: 10.2vw;
  max-width: min(90px, 9vh);
  align-content: flex-start;
}

.level-box {
  width: 100%;
  border: 2px solid #fff;
  background: #E9D2FF;
}

.level-box:after,
.box:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

.box {
  flex: 1 0 13%;
  background: #E9D2FF;
  border: 2px solid #fff;
}

* {
  box-sizing: border-box;
}


  
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
    
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    
  
  
    Score: 90000

If you can update you html, here is another idea using CSS grid:

@import url('https://fonts.googleapis.com/css?family=Black+Ops+One');
.game-container {
  display: grid;
  max-width: 90vh;
}
.game-container > * {
  border: 2px solid black;
}

.header-container,
.gameboard-container {
  display: grid;
  grid-template-columns: repeat(7, 10vmin);
  grid-auto-rows: 10vmin;    
}

.score-container {
  color: #acacac;
  text-align:center;
  font-family: 'Black Ops One', cursive;
  font-size: min(4vmin, 2rem);
  grid-area: 1/2;
}

.levels-container {
  display: grid;
  grid-template-columns: 7vmin;
  grid-auto-rows: 7vmin;  
}

.level-box,
.box{
  background: #E9D2FF;
  margin: 2px;
}


  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
  
  Score: 90000

Create responsive column of square items with flexbox

1 Answers