'Scale svgs to same height and fit in 1 row in flexbox

I'm trying to create a banner which contains accepted payment icons. I want to scale the images such that they all end up with the same height, where that height is the maximum possible such that the images all fit in one row. The images are not all the same size or aspect ratio (because, for example, they aren't just credit cards, they include the MasterCard ID Check logo).

I have this working in Safari, but it doesn't work in either Chrome or Firefox (and fails differently).

Desired outcome (Safari):

Chrome failure case, all the images fit in the row, not all heights are set the same:

Firefox failure case, all images scaled to same height, but the wrappers overflow the flex container:

Initially, I had just put the <img>s in as the children of the flex container (actually, initially initially, I tried to put all the svgs into an svg view sprite, but that ended up failing in lots of other ways that it was taking me too long to diagnose), but after poking around here a while, it became clear that I needed to wrap them in another set of <div>s, scale those divs (the children of the flex container), and then let the size of the images auto adjust. Most of the examples on here deal with scaling the other direction, but I just swapped the width/height parameters, and thought I was good (Safari is my default browser).

What's the cross-browser way to get my desired outcome?

HTML:

<div class="payment-icons">
    <div class="icon-container">
        <img class="icon payment-icon" src="1.svg">
    </div>
    <div>...</div>
    ...
</div>

CSS:

// flex container
.payment-icons {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    max-width: 281px;
    margin-left: auto;
    margin-right: auto;
}

// flex items
.payment-icons .icon-container {
    min-width: auto;
}

// images
img { // from an earlier rule; included here in case it matters
    display: block;
    height: auto;
    max-width: 100%;
}

img.payment-icon {
    height: auto;
    width: 100%;
}

You can see it working (or not, depending on your browser) in this snippet:

.payment-icons {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  max-width: 281px;
  margin-left: auto;
  margin-right: auto;
}

.payment-icons .icon-container {
  min-width: auto;
}

.payment-icons .icon-container:not(:last-child) {
  padding-right: 5px;
}

img {
  display: block;
  height: auto;
  max-width: 100%;
}

img.payment-icon {
  height: auto;
  width: 100%;
}

<html>

<body>
  <div class="payment-icons">
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-1-payment-icon-visa" src="https://www.dropbox.com/s/wxk2xjzo52e2p9d/1-payment-icon-visa.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-2-payment-icon-mc" src="https://www.dropbox.com/s/vzev285htn06dmk/2-payment-icon-mc.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-3-payment-icon-amex" src="https://www.dropbox.com/s/eur0beji6qep55p/3-payment-icon-amex.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-4-payment-icon-up" src="https://www.dropbox.com/s/zvni8pygvob2vvi/4-payment-icon-up.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-5-payment-icon-cb" src="https://www.dropbox.com/s/227ujpum81gigsc/5-payment-icon-cb.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-6-payment-icon-visa-secure" src="https://www.dropbox.com/s/p5zr6atbjfac6i5/6-payment-icon-visa-secure.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-7-payment-icon-mc_idcheck" src="https://www.dropbox.com/s/5y26briolgpmko6/7-payment-icon-mc_idcheck.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
  </div>
</body>

</html>

I'd ideally like to solve this with HTML/CSS, but if push comes to shove, I can edit the SVGs. I even tried naively modifying them. The first four items all have height and width set in the <svg> tag, whereas the last three set it inside the first bounding rectangle, and it crossed my mind that that might be the issue. So, e.g., the Visa card:

<svg width="750" height="471" viewBox="0 0 750 471" xmlns="http://www.w3.org/2000/svg">
    <path...

whereas the MasterCard ID Check:

<svg id="a5689fc5-8d5e-4b19-817c-171f8cabf65a" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504.16287 144">
    <rect width="504.16287" height="144" style="fill:none"/>
    ...

I tried adding width and height to the Mastercard <svg> in various different combinations, but it seems not to have mattered. As I said, I'd prefer not to monkey with this, but if that's the only way, I can.

Solution 1:^[1]

Added fix height to the images: width: 3rem and also aligned the items in the .payment-icons such as align-items: center;

.payment-icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  max-width: 281px;
  margin-left: auto;
  margin-right: auto;
}

.payment-icons .icon-container {
  min-width: auto;
}

.payment-icons .icon-container:not(:last-child) {
  padding-right: 5px;
}

img {
  display: block;
  height: 3rem;
  max-width: 100%;
}

img.payment-icon {
  height: 3rem;
  width: 100%;
}

<html>

<body>
  <div class="payment-icons">
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-1-payment-icon-visa" src="https://www.dropbox.com/s/wxk2xjzo52e2p9d/1-payment-icon-visa.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-2-payment-icon-mc" src="https://www.dropbox.com/s/vzev285htn06dmk/2-payment-icon-mc.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-3-payment-icon-amex" src="https://www.dropbox.com/s/eur0beji6qep55p/3-payment-icon-amex.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-4-payment-icon-up" src="https://www.dropbox.com/s/zvni8pygvob2vvi/4-payment-icon-up.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-5-payment-icon-cb" src="https://www.dropbox.com/s/227ujpum81gigsc/5-payment-icon-cb.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-6-payment-icon-visa-secure" src="https://www.dropbox.com/s/p5zr6atbjfac6i5/6-payment-icon-visa-secure.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
    <div class="icon-container">
      <img class="icon payment-icon payment-icon-7-payment-icon-mc_idcheck" src="https://www.dropbox.com/s/5y26briolgpmko6/7-payment-icon-mc_idcheck.svg?raw=1" aria-hidden="true" focusable="false" role="presentation">
    </div>
  </div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	scrummy

'Scale svgs to same height and fit in 1 row in flexbox

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]