Flexbox layout losing proportions when reduced in size

Question

I'm reproducing a golden spiral using CSS flexbox and percentage size for cells.

The round shape is drawn using a regular border and border-radius combination.

Everything is proportional until I resize the window to smaller widths.

I tried removing borders completely and turns out the layout is still losing proportions at some point.

Big container:

Small container:

Demo: https://jsfiddle.net/s09rkwub/1/

html

<div class="wrapper">
  <div class="rows fib">
    <div class="cols fill">
      <div class="rows fill">
        <div class="fr tl">3</div>
        <div class="fill cols">
          <div class="fc bl">4</div>
          <div class="fill rows">
            <div class="fill cols">
              <div class="fill tl fr">7</div>
              <div class="fc tr">6</div>
            </div>
            <div class="fr br">5</div>
          </div>
        </div>
      </div>
      <div class="fc tr">2</div>
    </div>
    <div class="fr br">1</div>
  </div>
</div>

css

.rows {
  flex-direction: column;
}
.cols {
  flex-direction: row;
}
.rows,
.cols {
  display: flex;
  .fill {
    flex: 1;
  }
  > * { 
    outline: solid 1px rgba(127,127,127, 0.3);
  }
}
...

Update: Working demo with applied solution.

Update 2 Thanks to Your support guys. I could finish my fib spiral codepen.

Answer 1

Solution

Add this to your code:

* {
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
}

revised fiddle

Explanation

Two concepts to consider:

1. An initial setting of a flex container is flex-shrink: 1.

   This means that, by default, flex items are allowed to shrink below any defined width, height or flex-basis.

   To prevent this behavior use flex-shrink: 0.

   More details here: What are the differences between flex-basis and width?

---

2. An initial setting of a flex item is min-width: auto.

   This means that, by default, a flex item cannot be smaller than the size of its content (regardless of flex-shrink or flex-basis).

   To allow flex items to shrink past their content use min-width: 0 (row direction), min-height: 0 (column direction), or overflow: hidden (other values also work, except visible).

   More details here: Why doesn't flex item shrink past content size?

---

With the adjustment below, your flex items can shrink past the text you have in your divs, allowing the scaling to continue without any obstacles:

* {
  flex-shrink: 0;
  min-width: 0;
  min-height: 0;
}

Answer 2

Taking <div class="fr br">5</div> as an example, it's min-width is 26px. Thus, scaling the spiral down to a level, where the mentioned div's height becomes less than 26px, it's getting distorted.

If you change the border width to 1px instead of 5px, you'll see, that suddenly, it's able to scale down to 18px perfectly fine and breaks in smaller sizes.

That's why you probably tried to reduce the border. However, the reason for the distortion is much simpler: You have content inside the divs and they do require some space (even if the font color is transparent). If you remove all the numbers from the div elements, you get the desired result. See the demo at https://jsfiddle.net/s09rkwub/2/