В приложении, с которым я работаю, есть фрагмент кода HTML, стилизованный с использованием flex, который присутствует в нескольких местах для визуализации нескольких всплывающих сообщений. Сообщения имеют значок закрытия в правом верхнем углу.
Однако, в зависимости от длины сообщения в элементе <p>
, расстояние между текстом и значком закрытия изменяется. Например, если текст состоит из нескольких строк или длинных слов, элемент <p>
занимает больше места, расстояние между текстом и значком закрытия увеличивается, и я не могу понять, почему.
Пример короткого текста
Пример длинного текста
Как обеспечить равномерное расстояние между ними?
<div style="display:flex; align-content:stretch;" id="aProductDraftUpdating>
<p style="margin: 0px; flex:1 1 auto">
"Editing the product draft continues from the last altered step.
Editing the product draft continues from the last altered step."
</p>
<i class="icons iconClose" role="link" style="flex:1 1 auto;" onClick="methodThatRemovesTheMessage(aProductDraftUpdating)">
::before
</i>
</div>