There are 3 flex items displayed here, but the 2nd item has a wider width due to its lengthy description. https://i.sstatic.net/OLy1r.png
Is there a way to ensure that all flex items have equal height and width without specifying fixed values, especially when the content of the description changes?
App.js
import "./styles.css";
export default function App() {
const containerStyles = {
display: "flex",
flexDirection: "column",
backgroundColor: "green",
marginRight: "10px",
flex: 1
};
return (
<div style={{ display: "flex" }}>
<div style={containerStyles}>
<div>Title 1</div>
<div>Description 1</div>
<div>Click to view detail</div>
</div>
<div style={containerStyles}>
<div>Title 2</div>
<div>Description 2 veryyyy longgggggggggggggggggggggg</div>
<div>Click to view detail</div>
</div>
<div style={containerStyles}>
<div>Title 3</div>
<div>Description 3</div>
<div>Click to view detail</div>
</div>
</div>
);
}
Codesandbox
https://codesandbox.io/s/crazy-cookies-nw0ykj