CSS - Cant give horizontal overflow auto-CodePudding

i am trying to make a nav bar with horizontal overflow auto it gets vertical overflow auto i tried giving the span display flex but then the text in side buttons goes down and it also have no effect on overflow can anyone help please

my code

#navigationBar {
display: flex;
justify-content: center;
text-align: center;
border: 1px solid;
border-right: none;
border-left: none;
height: 40px;
background: white;
overflow-x: auto;
}
#navigationBar span {
display: flex;
overflow-x: auto;
}
.options {
font-size: 15px;
padding: 6;
margin: 4;
font-family: monospace;
border-radius: 15px;
border: 1px solid;
}




<nav id="navigationBar">
<span id="catogory">
<button  id="options-All">All</button>
<button >Islamic</button>
<button >Educational</button>
<button >Arts & Creative</button>
<button >TV & Media</button>
<button >Arabic</button>
<button >Urdu</button>
<button >Hindi</button>
<button >Turkish</button>
<button >English</button>
<button >Ideas</button>
<button >Business</button>
<button >Legal</button>
<button >IT & Tech</button>
<button >knowledge</button>
<button >Health</button>
<button >Ask For Something</button>
<button >Human Resourses</button>
<button >Other</button>
<span>
</nav>

CodePudding user response：

First thing, the snippet you provided has CSS and HTML together with no proper syntax.
Second thing, you don't need extra span, so you can remove it.
At last, just update your CSS with the below changes, and it will work.

Note- As you mentioned that the button's text goes down, so giving it a style white-space: nowrap; would do the job.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #navigationBar {
      display: flex;
      border: 1px solid;
      border-right: none;
      border-left: none;
      padding: 20px 0;
      background: white;
      overflow-x: auto;
    }
    .options {
      display: inline-block;
      padding: 6px;
      border-radius: 15px;
      margin: 4px;
      border: 1px solid;
      white-space: nowrap;
      font-family: monospace;
      font-size: 15px;
    }
  </style>
</head>
<body>
  <nav id="navigationBar">
    <button  id="options-All">All</button>
    <button >Islamic</button>
    <button >Educational</button>
    <button >Arts & Creative</button>
    <button >TV & Media</button>
    <button >Arabic</button>
    <button >Urdu</button>
    <button >Hindi</button>
    <button >Turkish</button>
    <button >English</button>
    <button >Ideas</button>
    <button >Business</button>
    <button >Legal</button>
    <button >IT & Tech</button>
    <button >knowledge</button>
    <button >Health</button>
    <button >Ask For Something</button>
    <button >Human Resourses</button>
    <button >Other</button>
  </nav>
</body>
</html>