I am in need of a container div:
- This div should adjust its width based on the content within.
- I would like the child elements to align horizontally.
- The container itself should form a single horizontal line.
I prefer not to use flex because it tends to resize the children according to the container's width. I have come up with this solution which appears to be working, however, I seek a better understanding of the properties used.
import React from 'react';
import './style.css';
export default function App() {
return (
<div className="container">
{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((x) => {
return <div className="card">{x}</div>;
})}
</div>
);
}
related css code
.container {
display: inline-block;
background: red;
white-space: nowrap;
}
.card {
display: inline-block;
width: 100px;
height: 100px;
}
- My primary inquiry is: why are two inline-block usages necessary? (one for the container and one for the cards)
- You may notice that I had to include
white-space: nowrap;. Was it essential given this scenario?
I am mostly focused on the above questions, but if you have an additional more elegant solution, feel free to share it as well.