Div расширяется больше, чем его содержимое, несмотря на использование ширины: fit-content и других свойств. ⇐ Html

[Anonymous]

У меня есть элемент div #notes-div, к которому добавляется .notes через JQuery. Элемент div всегда выходит за пределы своего содержимого. Я пробовал width: fit-content, flex-shrink, но единственное, что действительно работает, — это установка определенного значения ширины, например 500 пикселей, что неудобно. Как сжать div до размера его содержимого???
Скриншот проблемы

Код: Выделить всё

#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;
}

Код: Выделить всё

hi
hi
hi
hi
hi

Подробнее здесь: https://stackoverflow.com/questions/798 ... -and-other