uikit - 長いタブのリストを下にするのではなく、オーバーフローにする方法

Question

今は、オーバーフローしてスクロールバーを作成するのではなく、長いタブのリストがある場合は、新しいタブを下に追加してお互いのトップ。私はこのデザインが気に入らず、オーバーフローするのを許す/強制する方法があるのだろうかと思っていました。

for (let i = 0; i < 20; i++) 
 
{ 
 
    $("#tabs").append(` 
 
    <li><a href="">test</a></li> 
 
    `); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit-icons.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/css/uikit.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id='tabs' class="uk-tab" data-uk-tab="{connect:'#content'}" style="overflow-x: scroll; "> 
 
</ul>

Answer 1

のように、#tabsにflex-wrap: nowrapとmax-widthを与える：

for (let i = 0; i < 20; i++) 
 
{ 
 
    $("#tabs").append(` 
 
    <li><a href="">test</a></li> 
 
    `); 
 
}

#tabs { 
 
    flex-wrap: nowrap; 
 
    max-width: 10000px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit-icons.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/js/uikit.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.34/css/uikit.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul id='tabs' class="uk-tab" data-uk-tab="{connect:'#content'}" style="overflow-x: scroll; "> 
 
</ul>

：

#tabs { 
    flex-wrap: nowrap; 
    max-width: 10000px; 
} 

は以下のスニペットを見てください