Заполнение оставшейся высоты или ширины в flex-контейнере
У меня есть 2 блока (div) рядом друг с другом в flexbox. Правый блок должен всегда иметь одинаковую ширину, а левый блок должен занимать оставшееся пространство. Однако он этого не делает, если я не задам ему конкретную ширину.
На данный момент я установил ширину левого блока на 96%, что выглядит неплохо до тех пор, пока я не сжимаю окно браузера – тогда правый блок начинает испытывать нехватку пространства.
Я понимаю, что можно оставить все как есть, но это как-то неправильно – кажется, есть способ сказать:
"правый блок всегда такой же; ты (левый блок) получаешь все оставшееся пространство."
Вот мой код:
<div class="ar-course-nav" style="display:flex; justify-content:space-between;">
<div style="width:96%;">
<div style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;">
<strong title="Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!">
Course Name Which is Really Quite Long And Does Go On a Bit But Then When You Think it's Stopped it Keeps on Going for even longer!
</strong>
</div>
<div style="width:100%; display:flex; justify-content:space-between;">
<div style="color:#555555; margin-right:8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;" title="A really really really really really really really really really really really long department name">
A really really really really really really really really really really really long department name
</div>
<div style="color:#555555; text-align:right; white-space:nowrap;">
Created: 21 September 2016
</div>
</div>
</div>
<div style="margin-left:8px;">
<strong>></strong>
</div>
</div>
Как мне правильно организовать пространство между блоками, чтобы левый блок занимал оставшееся пространство, а правый оставался фиксированной ширины?
2 ответ(ов)
Для элемента в контейнере с флексом используй следующие две строки:
flex-grow: 1; // Заполняет оставшееся пространство
min-width: 0; // Не использует больше пространства, чем доступно
Первое свойство flex-grow: 1 позволяет элементу занимать всё доступное пространство в контейнере. Это полезно, когда тебе нужно, чтобы элементы равномерно распределялись по ширине. Второе свойство min-width: 0 предотвращает ситуацию, когда элемент пытается занять больше места, чем ему разрешено, что может привести к переполнению контейнера или нежелательным эффектам. Используя обе строки вместе, ты обеспечишь правильное поведение элементов в флекс-контейнере.
Использование flex-grow: 1 позволит заполнить все доступное пространство, но если содержимое станет слишком большим, оно займет больше места. Поэтому вам нужно будет добавить min-width: 0.
Как вертикально выровнять текст внутри flexbox?
Как расположить div внизу своего контейнера?
Перенос строки в HTML с использованием '\n'
Установить фиксированную ширину столбца таблицы независимо от количества текста в ячейках?
Как сделать перенос строки с помощью CSS, не используя <br />?