固定元素的问题 - 无法使其可滚动

Question

HTML：

<div id="tmenu" style="direction:rtl;">
  <img src="assets/imgs/menu/all.jpg"/>
  <img src="assets/imgs/menu/sweets.jpg"/>
  <img src="assets/imgs/menu/main meals.jpg"/>
  <img src="assets/imgs/menu/ma5bozat.jpg"/>
  <img src="assets/imgs/menu/moqblat.jpg"/>
  <img src="assets/imgs/menu/mofrznat.jpg"/>
  <img src="assets/imgs/menu/carnavals.jpg"/>
  <img src="assets/imgs/menu/other.jpg"/>
</div>

检查此图片

https://imgur.com/a/hsKax

顶部标题中的图像是问题所在。那里有8张照片。

显示哪个适合屏幕的宽度并隐藏其余部分。

CSS：

#tmenu
{
    width: max-content;
    overflow-x: scroll!important;
    img
    {
        display: inline-block;
        width: 100px!important;
        height: 100px!important;
    }
}

如何使其可滚动？

Answer 1

#tmenu
{
    width: max-content;
    overflow-x: scroll!important;
    height:100px;
    overflow-y:hidden;
    white-space:nowrap;
    float:left;
    width:400px;
    font-size:0
}
    img
    {
        display: inline-block;
        width: 100px!important;
        height: 100px!important;
        vertical-align:middle;
    }

<div id="tmenu" style="direction:rtl;">
<img src="assets/imgs/menu/all.jpg"/>
<img src="assets/imgs/menu/sweets.jpg"/>
<img src="assets/imgs/menu/main meals.jpg"/>
<img src="assets/imgs/menu/ma5bozat.jpg"/>
<img src="assets/imgs/menu/moqblat.jpg"/>
<img src="assets/imgs/menu/mofrznat.jpg"/>
<img src="assets/imgs/menu/carnavals.jpg"/>
<img src="assets/imgs/menu/other.jpg"/>
</div>

这个怎么样？