Dariusz Sikorski Dariusz Sikorski - 1 month ago 7
CSS Question

Flexbox layout losing proportions when reduced in size

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.

Answer

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).

    To allow flex items to shrink past their content use min-width: 0 (row direction), min-height: 0 (column direction), or the overflow property with any value other than 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;
}
Comments