当方向为列时，Flex 收缩无法按预期工作

Question

I've provided the following little snippet and sandbox below. Images shrink to fit as expected when flex-direction is set to "row". However, when I set to "column", the images no longer shrink as expected. I've tried setting the height as per other posts and cannot get it to work.

Try it yourself in the sandbox by changing "row" to "column" under flex-direction. You can change the window size of the sandbox to see how the images change sizes to fit. When set to column, the images just end up being 100% width of the parent. I can't seem to figure this out!!

CSS:

.container {
  background-color: blue;
  min-width: 0px;
  min-height: 0px;
  max-height: 400px;
  max-width: 400px;
}

.cell {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.div-item {
  flex: 1 0 50px;
}

.image-pic {
  display: block;
  min-width: 0px;
  min-height: 0px;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

React:

import React from "react";
import "./styles.css";
import { Image } from "react-bootstrap";
import useravatar from "./user.jpg";

export default function App() {
  return (
    <>
      <div className="container">
        <div className="cell">
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
          <div className="div-item">
            <Image src={useravatar} className="image-pic" />
          </div>
         
         
        </div>
      </div>
    </>
  );
}

Check out the sandbox here:

https://codesandbox.io/s/flex-wrap-with-bootsrap-forked-808gd?file=/src/styles.css

Answer 1

I am a beginner so I might be wrong but my idea to fix your problem is when you give a certain width and height to your image parent div you can control them. So with this way you can avoid them getting bigger when they wrap. (Also you use flex: 1 0 50px but flex-basis only excepts % )

.cell {
  width: 100%;
  display: flex;
  flex:0 0 100%;
  flex-wrap: wrap;
  flex-direction: row;
}
.div-item {
  width:50px;
  height:50px;
}