Div wird größer als sein Inhalt, obwohl width: fit-content und andere Eigenschaften verwendet werden ⇐ CSS

[Anonymous]

Ich habe ein Div, #notes-div, an das über JQuery .notes angehängt wird. Das Div geht immer über seinen Inhalt hinaus. Ich habe width: fit-content, flex-shrink ausprobiert, aber das einzige, was tatsächlich funktioniert, ist das Festlegen der Breite auf einen bestimmten Wert, z. B. 500 Pixel, was unpraktisch ist. Wie kann ich das Div auf die Größe seines Inhalts verkleinern???
Screenshot des Problems

Code: Select all

          #notes-div {
display: flex;
flex-wrap: wrap;
justify-content: start;
width: fit-content;
outline: 2px solid red;
}
.note {
background-color: white;
border: var(--border);
width: 250px;
height: 300px;
border-radius: 8px;
padding: 12px;
margin: 12px;
box-shadow: 3px 0 24px rgba(0,0,0,0.1);
cursor: pointer;
transition: 0.2s;
box-sizing: border-box;
}

Code: Select all

hi
hi
hi
hi
hi