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

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', '[email protected]', '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>

CodePudding user response：

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', '[email protected]', '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)