0

I'm using flexbox with overflow auto to make items scrollable in x axis when the screen is small but the problem is that the first items became invisible even when I try to scroll to them.

.ToolsBar {
  background-color: #deefe7;
  width: 100%;
  margin: 30px 0px 0px 0px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 10px 10px 10px 10px;
  white-space: nowrap;
  overflow-x: auto;
}

.ToolsBar a {
  color: rgba(0, 0, 0, 0.8);
  font-size: 15pt;
  text-decoration: none;
  width: 120px;
  text-align: center;
  padding: 10px;
  font-weight: 900;
  white-space: nowrap;
}

.ToolsBar a:focus {
  background-color: #c4dacf;
}

.ToolsBarActive {
  background-color: #c4dacf;
}
<div class="ToolsBar">
  <a href="#" class="ToolsBarActive">Main</a>
  <a href="#">Furniture</a>
  <a href="#">Decoration</a>
  <a href="#">Storage Units</a>
  <a href="#">Office</a>
  <a href="#">Lighting</a>
  <a href="#">Sport</a>
</div>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Kareem Youssef
  • 47
  • 6
  • The issue has to do with how you're centering your items. You're using `justify-content` because it's convenient and obvious, however this is a problem when overflow occurs. As a test, change to `justify-content: 'start'` and observe the difference. Instead try restructuring and centering in another way, like using `margin: 0 auto`. See solution here: https://stackoverflow.com/a/33455342/4378314 . By the way, your code snippets aren't working as you somehow provided two separate snippets. – Kalnode Sep 19 '22 at 18:44

0 Answers0