Scrollable element fixed on the bottom of the page

Question

I need to have a scrollable element at the bottom of my page.

I thought I woul simply would set position: fixed and bottom:0. The issue is, this is to be a horizontal list of items, which I should be allowed to scroll through on the X axis.

From what I've gathered, it seems I can't scroll on a position: fixed element. But by removing that, I can't have it at the bottom of my page. How to solve this?

Here is an example of what my app currently looks like:

const items = ['item1', 'item2',  'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10', 'item11', 'item12', 'item13', 'item14', 'item15', 'item16', 'item17', 'item18']

const App = () => {
    return (
      <div>
        My app...
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
         <h3>The following are the two versions of my components:</h3>    
        <p style={{ color: 'blue' }}>Without position fixed (blue one): on the wrong spot but can scroll</p>
<p style={{ color: 'red' }}>With position fixed (red one): On the bottom of the screen as I want to, but cant scroll...</p>

        <div style={{
                display: 'flex',
                bottom: 0,
                position: 'fixed',
                overflowX: 'scroll',
                backgroundColor: 'red'
              }}>
                {items.map((item, index) => (
                    <div key={index} style={{ overflowX: 'visible', margin: '0 30px', height: '100%' }}>
                        <h2>{item}</h2>
                    </div>
                ))}
            </div>
      
        <div style={{
                display: 'flex',
                bottom: 0,
                overflowX: 'scroll',
                backgroundColor: 'blue'
            }}>
                {items.map((item, index) => (
                    <div key={index} style={{ overflowX: 'visible', margin: '0 30px', height: '100%' }}>
                        <h2>{item}</h2>
                    </div>
                ))}
            </div>
      </div>
    )
}



ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 1

It's an easy fix!

When setting a possibly-wider-than-the-viewport element to position: fixed, be sure to specify left and right properties.

Without those, the fixed-position element isn't width-constrained, and therefore the browser doesn't think it needs to be scrollable.

You could also use width: 100% in some cases.

const items = ['item1', 'item2',  'item3', 'item4', 'item5', 'item6', 'item7', 'item8', 'item9', 'item10', 'item11', 'item12', 'item13', 'item14', 'item15', 'item16', 'item17', 'item18']

const App = () => {
    return (
      <div>
        My app...
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
         <h3>The following are the two versions of my components:</h3>    
        <p style={{ color: 'blue' }}>Without position fixed (blue one): on the wrong spot but can scroll</p>
<p style={{ color: 'red' }}>With position fixed (red one): On the bottom of the screen as I want to, but cant scroll...</p>

        <div style={{
                display: 'flex',
                bottom: 0,
                left: 0, //  <--
                right: 0, //  <--
                position: 'fixed',
                overflowX: 'scroll',
                backgroundColor: 'red'
              }}>
                {items.map((item, index) => (
                    <div key={index} style={{ overflowX: 'visible', margin: '0 30px', height: '100%' }}>
                        <h2>{item}</h2>
                    </div>
                ))}
            </div>
      
        <div style={{
                display: 'flex',
                bottom: 0,
                overflowX: 'scroll',
                backgroundColor: 'blue'
            }}>
                {items.map((item, index) => (
                    <div key={index} style={{ overflowX: 'visible', margin: '0 30px', height: '100%' }}>
                        <h2>{item}</h2>
                    </div>
                ))}
            </div>
      </div>
    )
}



ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>