Как предотвратить увеличение ширины столбца гибкого дочернего элемента ⇐ CSS

[Anonymous]

У меня есть несколько элементов во флексбоксе столбца, который сам по себе является гибким элементом.
Когда я нажимаю кнопку, содержимое моего последнего элемента меняет свою ширину и становится более широким элементом flexbox делает его шире.
Я хочу предотвратить это, потому что это некрасиво. Ширина не должна меняться при нажатии кнопки.
Для разъяснений см. фрагмент кода.

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

var thirdDivs = [...document.querySelectorAll('.child.third')];
document.getElementById('toggleButton').addEventListener('click', function() {
thirdDivs.map((thirdDiv) => {thirdDiv.classList.toggle('hidden');});
});

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

main{
display: flex;
}

.container {
display: flex;
flex-flow: column wrap;
border: 1px solid red
}

.hidden {
display: none;
}

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

 I don't want that red box to change size when I press the button. I want the text to be on two different lines
Switch



Some content

Some more content

A short text

A very much more longer text

Я безуспешно пытался поиграть с flex-grow и flex-shrink.

Подробнее здесь: https://stackoverflow.com/questions/784 ... lumn-width