Flexbox – Responsive height of divs when browser is resized

Issue

I'm creating a 6x6 square grid with Flexbox. I need the squares to resize proportionally to fit the width & height of a div (main-board) for smaller phone screens.

I can't seem to achieve this without specifying exact height and width dimensions.

Here is my fiddle: https://jsfiddle.net/zkunhqvs/1/

            <div id="main-board">
          <div id="game-board">
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
            <div class="letter-row">
              <div class="letter-box">1</div>
              <div class="letter-box">2</div>
              <div class="letter-box">3</div>
              <div class="letter-box">4</div>
              <div class="letter-box">5</div>
              <div class="letter-box">6</div>
            </div>
          </div>
        </div>

Solution

Flexbox is not the appropriate tool for your task. Consider using CSS grid. It will save you a lot of time and provide cleaner code that is more responsive in your case. The advantages of CSS grid over flexbox can be found here, however I draw your attention to:

The approach of CSS Grid is the layout first, while the Flexbox approach is primarily the content.

1. Create a div container <div id="main-board">
2. On a CSS file use display:grid:

#main-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  height: (your value);
  width: (your value);
}

In the repeat(6, 1fr) lines, we specify that 6 rows and columns should be created, occupying one fractional unit. This allows the divs (grids) to occupy 1 fraction of the total space each. Thus, your grid will resize proportionally to the display - so long as your height and width declared in CSS allows the container to resize flexibly (min-height and min-width come to mind!). More specifically for resize responsiveness check out the CSS clamp function - it allows you to set a minimum, maximum and ideal size; all in one line.

Answered By - Christos Binos