JSFiddle - React, Tailwind, and code Playground

by Manju06

HTML

<body>
  One item displays centered at container height.
  <div class="flex-container center">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg>
  </div>

  Many items get scaled to fit in the box, which is
  what I want. The image aspect ratio correctly remains
  unchanged.
  <div class="flex-container">
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in" version="1.1" viewBox="0 0 72.395996 72.395999" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(72.198 -89.402)">
        <circle cx="-36" cy="125.6" r="36" fill="#fc0000" stroke="#000" stroke-linecap="round" stroke-width=".396"/>
      </g>
    </svg> 
    <svg class="flex-item" width="1.0055in" height="1.0055in"...

CSS

.flex-container {  
  display: flex;
  margin-right:0;
  margin-left:0;
  width: 2in;
  height: 0.5in;
  background: lightblue;
  margin-bottom: 1em; 
  padding: 0;
  margin: 0;
  list-style: none;
}
.center { 
  justify-content: center; 
}

.flex-item { 
  text-align: center; 
  height: 100%;
  width: auto;
  object-fit: contain; 
}

.block-container {
  width: 2in;
  height: 0.5in;
  background: lightblue;
  margin-bottom: 1em;
  text-align: center;
}