make elements overflow on only right side

Question

**I want first element to stay right where it is. Second element should scroll when screen resizes. fruits should not get hide under location. Everything works fine until window resizes to 600px. when window resizes it overlaps the first element. I set it to overflow-x scroll. that's what I want but the second element gets overlapped by first element. margin-left not working. position relative not work **

<div id="main">
  <div id="location">
    <div id="one"></div>
    <div id="two">deliver to</div>
    <div id="three">400072</div>
  </div>
  <div class="categories">
    <label class="cat" id="fruits">
      Fruits
    </label>
    <label class="cat"> 
      Vegetables
    </label>
    <label class="cat">
      Dairy&#38;Bakery
    </label>
    <label class="cat">
      something
    </label>
    <label class="cat">
      Something
    </label>
    <label class="cat">
      Something
    </label>
  </div>
</div>

#main{
  display: flex;
  background-color: thistle;
}
/* LOCATION */
#location{
  display: grid;
  grid-column-gap: 5px;
  border-right: solid 1px #a9a3a3;
}
#one{
  grid-column:1;
  grid-row:1/span 2;
  align-self: center;
}
#two,#three{
  grid-column: 2;
  justify-self: center;
}
#two{
  align-self: flex-start;
  white-space: no-wrap;
}
#three{
  align-self: flex-end;
  font-weight: bold ;
}
/* CATEGORIES */
.categories{
  display: flex;
  justify-content: space-around;
  width: 95vw;
}
.cat{
  align-self: center;
  padding: 0 5px;
  transition: all 0.5s ease-out;
  cursor: pointer;
}
input[type="radio"]{
  opacity: 0;
  height: 0;
  width: 0;
}
@media only screen and (max-width: 600px) {
  .categories{
    overflow-x: scroll;
  }

Answer 1

.categories{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex: 1;
}

Answer 2

Try this

.categories{
    justify-content: space-between;
  }