8

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:

big container image

Small container:

small container image

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.

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Dariusz Sikorski
  • 4,309
  • 5
  • 27
  • 44

2 Answers2

6

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?

  1. 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;
}
Community
  • 1
  • 1
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • This is a different approach than @Paul suggested and both answers solve the problem. Your response is more detailed so i will wait with marking an accepted answer. Thank you for the detailed review! – Dariusz Sikorski Oct 07 '16 at 12:31
  • I checked proposed solution: turns out that only setting cells min-width/height to 0 solved the problem, without touching Shrink property :) – Dariusz Sikorski Oct 07 '16 at 12:38
  • @DariuszSikorski, Yes, I figured `min-*` was likely all you needed. But I didn't have time to review your code line-by-line, so I threw `flex-shrink` in there, just in case (and as a general concept to be aware of). Nice design and structure, by the way. – Michael Benjamin Oct 07 '16 at 13:54
5

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/

Paul
  • 8,974
  • 3
  • 28
  • 48