css - how to make flex-item resize with 1:1 ratio and the flex-container padding-left and padding-right is always the same

Question

When I resize the window,

the flex-container has different padding-left and padding-right which is not satisfactory.

Therefore, I want to make the flex-item can resize when the window size change, given that the container with the (almost)same padding-left and padding-right and the flex-item maintain 1:1 ratio.

Is it possible? Or is there any other way to make it less ugly when resizing?

App.js

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [list, setList] = useState([
    { id: 1, fileName: "file 1" },
    { id: 2, fileName: "file 2" },
    { id: 3, fileName: "file 3" },
    { id: 4, fileName: "file 4" },
    { id: 5, fileName: "file 5" },
    { id: 6, fileName: "file 6" }
  ]);
  return (
    <div className="App">
      <div className="layout__container">
        <div className="list">
          {list.map((li) => {
            return (
              <figure title={li.fileName} key={li.id} className={"list__item"}>
                <div className="list__item__file">
                  <div className="list__item__file__name">{li.fileName}</div>
                </div>
              </figure>
            );
          })}
        </div>
      </div>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.layout__container {
  width: 100%;
  padding: 3rem 2rem 2rem 2rem;
  text-align: left;
  border: 1px solid black;
}

.list {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: left;
  flex-wrap: wrap;
  flex-grow: 1;
}
.list .list__item {
  position: relative;
  width: 100px;
  height: 100px;
  margin-right: 1rem;
  margin-bottom: 1rem;
  background-color: white;
  border: 1px solid white;
  overflow: hidden;
  flex: 0 0 auto;
}
.list .list__item img {
  max-height: 100%;
  max-width: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.list .list__item .list__item__file {
  background-color: #c3c4c7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.list .list__item .list__item__file .list__item__file__name {
  overflow: hidden;
  font-size: 0.9rem;
}
.list .list__item .ist__item__file .list__item__file__type {
  color: #8c8f94;
  font-size: 0.625rem;
  text-transform: uppercase;
  margin: 0 auto;
}

CodeSandbox:
https://codesandbox.io/s/young-brook-o83f2?file=/src/App.js

Answer 1

You need to correct the box-sizing of all your elements to border-box. Then you just need to remove margins from the list__item and change the justify-content in the .list to center. Here is the code: https://codesandbox.io/s/6p2vh