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

[Anonymous]

Я пытаюсь правильно выровнять H2 и выпадающий в мобильный список, используя Display Flex. Когда раскрывающийся список приближается к H2 , он будет неловко спуститься, как показано на изображениях. Как я могу сделать H2 изящно течь?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