After setting the flex-direction to "row", images in a snippet and sandbox shrink as expected. However, changing it to "column" causes the images to not shrink as they should. Attempts to set the height based on other suggestions have been unsuccessful.
To experiment with this issue yourself, modify flex-direction from "row" to "column" in the sandbox. Adjusting the window size will show how the images resize accordingly. When using column, the images end up being 100% width of the parent container. It's puzzling to figure out what's causing this behavior!
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