Javascript 固定在页面底部的可滚动元素

我需要在我的页面底部有一个可滚动的元素

我想我只需要设置

位置：fixed

和

底部：0

。问题是，这是一个水平的项目列表，应该允许我在X轴上滚动

从我收集的信息来看，似乎我无法滚动

位置：fixed

元素。但是通过删除它，我无法将其放在页面底部。如何解决这个问题

以下是我的应用程序当前外观的示例：

const items=['item1'，'item2'，'item3'，'item4'，'item5'，'item6'，'item7'，'item8'，'item9'，'item10'，'item11'，'item12'，'item13'，'item14'，'item15'，'item16'，'item17'，'item18']
常量应用=（）=>{
返回(
我的应用程序。。。
知识的同一性是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德
以下是my components的两个版本：
没有固定位置（蓝色的）：在错误的位置，但可以滚动
位置固定（红色的一个）：在屏幕底部，如我所愿，但无法滚动
{items.map（（项，索引）=>(
{item}
))}
{items.map（（项，索引）=>(
{item}
))}
)
}
ReactDOM.render(
,
document.getElementById（'app'）
);

这是一个简单的解决方案

将可能比视口宽的元素设置为
位置：固定时，请确保指定
左
和
右
属性。
如果没有这些元素，固定位置元素就没有宽度约束，因此浏览器认为它不需要滚动

在某些情况下，您还可以使用
width:100%


const items=['item1'，'item2'，'item3'，'item4'，'item5'，'item6'，'item7'，'item8'，'item9'，'item10'，'item11'，'item12'，'item13'，'item14'，'item15'，'item16'，'item17'，'item18']
常量应用=（）=>{
返回(
我的应用程序。。。
知识的同一性是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德
以下是my components的两个版本：
没有固定位置（蓝色的）：在错误的位置，但可以滚动
位置固定（红色的一个）：在屏幕底部，如我所愿，但无法滚动
(
{item}
))}
)
}
ReactDOM.render(
,
document.getElementById（'app'）
);
Hi。你试过flexbox布局吗？