How to get the background to extend past a parent, overflow container of a certain width

Question

Please see the below code snippet. I have a container with a set width, and in that container, a series of rows who's width is greater than the parent container. I have a background for some of those rows, however, when I scroll to the right to the remaining portion of the rows, the background stops (the background only fills the width of the container). How can I get the background for these rows to persist to the overflow? Thanks.

 const Example = () => { const row = ['John Smith', '2020-10-01', 'jsmith@gmail.com', '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>

Answer 1

You have to use two containers if you only want horizontal scroll in table only and apply fit-content to inner container and width (here 40rem ) according to wish on outer container

 const Example = () => { const row = ['John Smith', '2020-10-01', 'jsmith@gmail.com', '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',width:'fit-content' }}> {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>

If you say table cells are wider than before than you can solve that out by reducing innermost width ( 15rem ) or some margins ( 0 5rem )