Текст в гибком контейнере ломается неловко, а не плавно завернуть ⇐ CSS

[Anonymous]

Я пытаюсь правильно (H2) и выпадает в мобильный. Использование дисплея Flex. Но когда выпадает, приближается к H2, он будет неловко спуститься. Вы можете посмотреть на изображения. Итак, как я могу сделать H2 изящно течь? < /p>
h2{ /* tried to break the h2 to h2 flow down gracefully */
overflow-wrap: break-word;
word-break: break-word;
white-space: normal;

}

#filterOptions { /* div contain h2 and dropdown */
display: flex;
overflow: scroll;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
}

#menuStructure {
/* main div */
display:flex;
flex-direction:column;

}


`;
}).join('');

const styleC = document.createElement('style');
styleC.innerHTML =Array.from({ length: count }).map((_, index) => {
const categoryNamee = categoryList[index].replace(/[^a-zA-Z0-9]/g, '_');

return `

.${categoryNamee}{
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;

}
`;
}).join('');


Подробнее здесь: https://stackoverflow.com/questions/797 ... g-smoothly