Carduelis
@Carduelis
Web-developer, front-end, js, less

Как решить проблему с flex, когда один из чайлдов фиксирован, а второй должен растянуться?

Как заставить правую часть не вылезать за края, а чтобы ее ширина подстраивалась под контейнер?
Демо
UPD2: Решенное неэлегантно Демо
РеальностьЖелаемое
b0d5f057fa7547d0b73792820e837de0.png
e9d4d92a40cc49c9808560762760fc35.png

P.s.: Не очень понимаю до сих пор как использовать суть флекса, как, например, раньше выдумывал хаки с inline-block, float, и прочие штуки. Там как-то понимается, как оно все работает, а с флексом -- да, понимаю отдельные свойства, а вот как из них собрать решение задачи -- не понятно.
P.p.s.: css calc(100% - 4rem) не предлагать ;)
UPD: text-overflow: ellipsis; должен работать
UPD2. Добавил решение, кто может лучше?
  • Вопрос задан
  • 157 просмотров
Пригласить эксперта
Ответы на вопрос 1
И такой вариант вас не устроит?
.snippet-main {
    max-width: 230px;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
 }

Ведь у вас есть фиксированная ширина контейнера, фиксированная ширина изображения. Остается лишь задать макс. ширину блока с именем, а лишнее - спрятать.
Другого варианта я не вижу.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы