Parent does not change its width according to text in a scrollable div

Question

I have a div which has buttons inside. These buttons have text inside. When I have more buttons it makes my div scrollable and text inside buttons overflows and buttons gets minimum width i have defined. Text doesnt overflow when parent div doesnt have scroll and buttons adjust widths as well. How can I make text not overflow and adjust wdith of buttons according to text in a scrollable div

<div className="div1">
  {groups.map((group, index) => {          
                return (
                  <div
                    key={index}
                    className={"groups-button"}
                    onClick={() => {        
                    }}
                  >
                    <p>{group.name}</p>
                  </div>
                );
              })}
</div>

.div1{
 height: 11.29629%;
  display: flex;
  flex-direction: row;
  margin-left: 1.8125em;
  overflow-y: scroll;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.groups-button{
  min-width: 8.242052082em;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: fit-content;
}
.groups-button p{
  margin: 0px;
  text-align: center;
  font: normal normal 600 1.38417em/1.1em Titillium Web;
  letter-spacing: 0.13px;
  color: #000000;
  opacity: 1;
  width: fit-content;
}

Answer 1

Here if you will add the width property inside the .div1 class, as below:

.div1{
 height: 11.29629%;
  display: flex;
  flex-direction: row;
  margin-left: 1.8125em;
  overflow-x:scroll; 
  width: 500px;
}