Флексбокс с обернутым текстом оставляет нежелательное пустое горизонтальное пространство [дубликат] ⇐ CSS

[Anonymous]

Я пытаюсь создать печатную динамическую HTML-форму, но не могу расположить вопросы и ответы на странице так, как мне хочется.
У меня есть гибкий контейнер для пары вопрос и ответ, и я ожидаю, что текст в любом из них будет перенесен, если он слишком длинный. Проблема в том, что после переноса текста остается много пустого горизонтального пространства. Это не мой желаемый результат, особенно по вопросу (слева).
Как мне продолжать использовать CSS flexbox и обтекание текстом, не имея при этом лишнего пробела? Я предпочитаю использовать чистый HTML и CSS и не решаюсь реализовать какой-либо JavaScript из-за проблем с производительностью.
[img]https: //i.sstatic.net/fnmlKi6t.png[/img]

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

Breathing Circuit for Bedside Ventilator:
Quantity Other Than Physician Order (5)

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

.container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: stretch;
align-items: center;
gap: 0.7em;
}

.container .question {
flex: 0 1 auto;
text-wrap: balance;
}

.container .answer {
flex: 1 1 auto;
text-wrap: pretty;
}

CodeSandbox: https://codesandbox.io/p/sandbox/n6883s


Подробнее здесь: https://stackoverflow.com/questions/790 ... ntal-space