Div expanding larger than its content despite using width: fit-content and other properties

I have a div, #notes-div that is appended with .notes through JQuery. The div always expands beyond its content. I have tried width: fit-content, flex-shrink, but the only thing that actually works is setting the width to a specific value, like 500px, which is inconvenient. How can I shrink the div to the size of its content???

Screenshot of problem

CSS:

#notes-div { display: flex; flex-wrap: wrap; justify-content: start; width: fit-content; } .note { background-color: var(--white); border: var(--border); width: 250px; height: 300px; border-radius: var(--border-radius); padding: 12px; margin: 12px; box-shadow: var(--box-shadow); cursor: pointer; transition: 0.2s; box-sizing: border-box; }