html - Force div to expand with content

Question

I have a series of divs that is drawing from data in an array. The array gets mapped over and for each element in the array, the relevant data gets pulled and placed into a div. The problem is the background of the divs seems to be rendering independent of the width of the content. So the content will not fit in the divs; it's being cut off. This only happens on Safari; the divs are rendering just fine on Chrome. How can I resolve this issue? For reference, the site is up at www.jevoncochran.com/projects.

This is how the divs are being rendered:

<div className={styles["projects-ps-technologies-container"]}>
  {props.technologies.map((t) => (
    <div className={styles["projects-ps-tech"]}>{t}</div>
  ))}
</div>

The CSS that controls the divs:

.projects-ps-technologies-container {
  // border: 1px dashed black;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  margin-bottom: 2%;
}

.projects-ps-tech {
  background-color: #2c3259;
  min-width: 8%;
  color: #fff;
  padding: 2%;
  font-size: 1.3rem;
  margin-right: 2%;
  margin-bottom: 2%;
}

Safari screenshot (this is the problem):

Chrome screenshot (this is how the divs should be rendering):

question from:https://stackoverflow.com/questions/65943931/force-div-to-expand-with-content

Answer 1

Waitting for answers