cssのみを使用してモバイルデバイスでスクロールバーを持たないスクロール可能なフレックスコンテナを実現できますか？まだスクロールすることができながら、<a href="https://streamable.com/uyddy" rel="nofollow noreferrer">https://streamable.com/uyddy</a></p> <p>私は何とかその特定のdivの中に水平スクロールバーを非表示にすることができます場合、私は求めています：

Question

は、私がここにビデオをアップロード？モバイルデバイスでこれを実現したいのです。

私はここにコードを添付： https://codepen.io/UrsuGrizzly/full/aVRZyg/ https://jsfiddle.net/o2ucuorL/

<div id="bottom"> 
    <a href="#" id="all">All</a> 
    <a href="#">Images</a> 
    <a href="#">Videos</a> 
    <a href="#">News</a> 
    <a href="#">Maps</a> 
    <a id="books" href="#">Books</a> 
    <a id="flights" href="#">Flights</a> 
    <a id="personal" href="#">Personal</a> 
    <a id="stools" href="#">Search tools</a> 
    <a id="moar" href="#">More</a> 
    <a href="#" id="settings">Settings</a> 
    <a href="#" id="tools">Tools</a 
</div> 

body{ 
    font-family: arial,sans-serif; 
    font-size: 13px; 
} 

#bottom{ 
    grid-area: 2/1/3/3; 
    display: flex; 
    overflow-x:scroll; 
} 

#bottom a{ 
    font-size: 12px; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: rgba(0,0,0,0.54); 
    padding: 14px 16px 12px 16px; 
    } 

#bottom #stools{ 
    border-left: 1px solid rgba(0,0,0,.12); 
    padding: 14px 16px 12px 24px; 
    white-space:nowrap; 
    } 

#bottom #all{ 
    color: #4285f4; 
    border-bottom: 2px solid #4285f4; 
    } 

Answer 1

を私がしたい何がちょうど隠しに設定された固定の高さとoverflowプロパティで親のdivの内側#bottomのdiv要素をラップすることです。次に、スクロールバーと同じ高さのpadding-bottomを#bottom divに指定するだけです（多かれ少なかれ10pxのように）。そしてthatsすべて:)、素晴らしい作品です。ここにコードを残してください：

// HTML Part 
<div class="container"> 
<div id="bottom">    
    <a href="#" id="all">All</a> 
    <a href="#">Images</a> 
    <a href="#">Videos</a> 
    <a href="#">News</a> 
    <a href="#">Maps</a> 
    <a id="books" href="#">Books</a> 
    <a id="flights" href="#">Flights</a> 
    <a id="personal" href="#">Personal</a> 
    <a id="stools" href="#">Search tools</a> 
    <a id="moar" href="#">More</a> 
    <a href="#" id="settings">Settings</a> 
    <a href="#" id="tools">Tools</a> 
</div> 
</div> 

// CSS Part 
body { 
    padding: 0; 
    margin: 0; 
    font-family: arial,sans-serif; 
    font-size: 13px; 
    } 

.container { 
    height: 43px; 
    width: 100%; 
    overflow: hidden; 
    } 

#bottom { 
    grid-area: 2/1/3/3; 
    display: flex; 
    overflow-x: scroll; 
    padding-bottom: 10px; 
    } 

#bottom a { 
    font-size: 12px; 
    text-transform: uppercase; 
    text-decoration: none; 
    color: #0000008a; 
    padding: 14px 16px 12px 16px; 
    white-space: nowrap; 
    } 

#bottom a#all { 
    color: #4285f4; 
    border-bottom: 2px solid #4285f4; 
}