flexbox child are not preserving its height when viewport shrinks

Question

I have 6 svg icons each contained in a div and also I have a general container that contains all of them with a width of 50%, three of these icons have a square aspect and the other three have a rectangle aspect.

As you can see in the code all the icons have a height of 80px but when the viewport shrinks the icons with rectangle aspect become smaller than their square siblings and that's not what I want, I want that all icons preserve the height (and the width), and if they are going to shrink then they all should preserve the height ratio i.e. they all should remain with the same height.

This is an issue that occurs only in chrome, in firefox it doesn't happen, though I didn't test it on other browsers.

Removing the 50% width from the container fixes this but I need to specify a width for reasons that are not relevant to the question.

.general-container{
  background-color: peachpuff;
  display: flex;
  flex-direction: row;
  width: 50%;
  justify-content: space-between;
  margin: 0 auto;
}
.icon-container{
  display: block;
  margin: 0 2px;
  height: 80px;
}

<div class="general-container">
      <div class="icon-container">
        <svg width="100%" height="100%" viewBox="0 0 41 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
          <g transform="matrix(1,0,0,1,-237.288,-229.987)">
              <rect x="237.288" y="229.987" width="40.678" height="40.678"/>
          </g>
        </svg>
      </div>
      <div class="icon-container">
        <svg width="100%" height="100%" viewBox="0 0 69 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
            <g transform="matrix(1,0,0,1,-293.041,-229.987)">
                <g transform="matrix(1.67742,0,0,1,-104.99,0)">
                    <rect x="237.288" y="229.987" width="40.678" height="40.678"/>
                </g>
            </g>
        </svg>
      </div>
      <div class="icon-container">
        <svg width="100%" height="100%" viewBox="0 0 41 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
            <g transform="matrix(1,0,0,1,-237.288,-229.987)">
                <rect x="237.288" y="229.987" width="40.678" height="40.678"/>
            </g>
        </svg>
      </div>
      <div class="icon-container">
        <svg width="100%" height="100%" viewBox="0 0 69 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
            <g transform="matrix(1,0,0,1,-293.041,-229.987)">
                <g transform="matrix(1.67742,0,0,1,-104.99,0)">
                    <rect x="237.288" y="229.987" width="40.678" height="40.678"/>
                </g>
            </g>
        </svg>
      </div>
      <div class="icon-container">
        <svg width="100%" height="100%" viewBox="0 0 41 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
            <g transform="matrix(1,0,0,1,-237.288,-229.987)">
                <rect x="237.288" y="229.987" width="40.678" height="40.678"/>
            </g>
        </svg>
      </div>     
    </div>

score 0 · Answer 1 · answered May 30 '21 at 02:36

Chrome has a history ([1], [2], [3]) of being a bit less magical about flex-basis: auto (which is present by default on all of your .icon-containers) than other browsers. Firefox is managing to look into your SVG and notice its actual proportions, while Chrome is stopping at <svg width="100%" height="100%"> and assuming a 1:1 aspect ratio on every icon for flexbox negotiation.

You'll have to give Chrome enough information to make the right decision. I tried some permutations of setting the width and height attributes on your <svg>s themselves, but that doesn't seem to work well in your case. Instead, it seems that setting the flex-basis on the .icon-containers is needed.

Here's the basic way I got it to work in Chrome, simply going off of the even/odd pattern. (This is in addition to your existing CSS.) In production, you would of course need to use different classes to assign the different flex-basises:

.icon-container{
  flex-basis: 80px;
}

.icon-container:nth-child(even){
  flex-basis: 134.63px;
}

Hopefully someone else can come up with an approach that adjusts the SVGs directly.

flexbox child are not preserving its height when viewport shrinks

1 Answers1