Could you please take a look at the code snippet below? I am dealing with a situation where I have a container with a fixed width, and inside that container, there are rows whose width exceeds that of the parent container. Some of these rows have a background color, but when I scroll horizontally to see the remaining rows, the background doesn't continue past the initial width of the container. How can I ensure that the background color persists for the overflow section of the rows? Thank you.
const Example = () => {
const row = ['John Smith', '2020-10-01', '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5d372e303429351d3a303c3431733e3230">[email protected]</a>', 'Phoenix', 'Arizona'];
const rows = [row, row, row, row, row];
return (
<div
style={{
background: 'white',
border: '1px solid black',
height: '100%',
margin: '1rem',
overflow: 'auto',
width: '40rem',
}}
>
{rows.map((row: any, index) => (
<div style={{ background: index % 2 === 0 ? 'orange' : 'white', display: 'flex' }}>
{row.map((label: string) => (
<div style={{ margin: '0 5rem', width: '15rem' }}>{label}</div>
))}
</div>
))}
</div>
);
};
ReactDOM.render(<Example />, document.getElementById("react"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>