Почему при dispalay:grid ломается обводка блока через svg?

nikfcsm, В подобных случаях для проблем с масштабированием свг можно для svg задать preserveAspectRatio="none", а для отдельных элементов с обводкой задавать vector-effect="non-scaling-stroke".
Либо на css попытаться повторить такую же обводку. Непросто будет, но маской с коническим градиентом можно что то похожее воспроизвести.

Почему при dispalay:grid ломается обводка блока через svg?

Grid здесь имеет опосредованное влияние — просто ширина блока в вашем примере уменьшается на 0.5px. И в свг соответственно масштабируется обводка. При адаптиве это будет происходить неизбежно. А если в блок добавить больше контента и он по высоте станет больше, опять масштабирование изменит пропорции обводки.

Как сделать размер flex-элемента по контенту и с указанным flex-grow?

Чтобы добиться именно такого поведения нужен только flex-grow: 9999 hack https://www.joren.co/flex-grow-9999-hack/
И как видите достаточно четерех девяток.

Как изменить цвет ссылок?

Здесь специфичность вообще не при чем. Для header__nav-list li можно прописать в селектор хоть id, хоть important добавить. Все равно применятся стили прописанные именно для ссылки. А они здесь есть только дефолтные браузерные.

Как задать border на всю ширину контейнера?

Lynn «Кофеман»,

Проще всего добавить пустых ячеек в начале и конце каждой строки.

Это я думаю лишнее — у контейнера то по любому будут горизонтальные внутренние отступы. Здесь подойдет псевдоэлемент с left и right с отрицательным значением величины отступа. Желательно значение отступа вынести в переменную.

Как задать border на всю ширину контейнера?

Делайте так, чтобы было как в макете и потом вопросы задавайте. Впустую на вас тратить время здесь никто не будет.

Как задать border на всю ширину контейнера?

Дмитрий Ярощук,

Подправил

И теперь таблица естественно по ширине контейнера — вопрос можно считать решенным?

Как задать border на всю ширину контейнера?

Дмитрий Ярощук, Ну так оберните на codepen — о чем еще я должен догадаться?

Как задать border на всю ширину контейнера?

Если ориентироваться на codepen, то просто для body прописать margin: 0 и border станет на всю ширину.

Как выбрать элементы удовлетворяющие условию выборки?

https://codepen.io/xdevelx/pen/OJeNxrG?editors=1100

Как верстать блок необычной формы адаптивно?

И здесь на макете я не вижу выреза, есть только скругленное изображение, под которым подложкой псевдоэлемент с градиентом. А вот как реализовать верхние скругления карточки, я бы сперва смотрел как их сделал дизайнер.

Как верстать блок необычной формы адаптивно?

Ankhena, Кстати, тот пример со срезанными закругленными углами (https://jsfiddle.net/Ankhena/1hu9ot0q/1/) можно еще реализовать маской с одним радиальным градиентом https://codepen.io/xdevelx/pen/rNEOLZb

Как использовать в clip-path: path() проценты (ну и calc)?

Антон Антон, Ну тогда только остаётся множественный mask-image

Как использовать в clip-path: path() проценты (ну и calc)?

Антон Антон, И здесь судя по рисунку может подойти вполне border-image. С ним как раз углы фиксированные будут а части между углами растягиваются.

Как использовать в clip-path: path() проценты (ну и calc)?

Антон Антон, Маски mask-image могут быть множественные как и background-image. К примеру 4 фиксированного размера - через mask-position. И одна с адаптивными размерами. Возможно придётся применять mask-composite. Можно и одной маской сделать, но при изменении ширины и высоты элемента пропорции углов будут меняться, что может не устроить.

Как использовать в clip-path: path() проценты (ну и calc)?

Антон Антон, А кто мешает использовать css маски, у которых есть и размер, и position? В более сложных случаях с масками можно и композицию задействовать, если надо чтобы какая то часть фиксировано обрезалась а остальное тянулось.

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Ankhena,
1 — минимальный размер в оригинальном примере не 1020px. У img min-width: auto (а это ее intrinsic ширина 640px)
2 — у автора вопроса картинка на ширинах вьюпорта примерно 880px-700px перестает сжиматься меньше 640, а при меньших вьюпортах начинает работать ограничение max-width: 100% и она сжимается дальше
3 — Ну и собственно все работает в соответствии со спецификацией, которая говорит:

By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.

https://drafts.csswg.org/css-flexbox/#flex-common
4 — я тоже могу создать пример изображения с внутренним размером больше контейнера и естественно не будет видно ограничение по минимальной ширине, так как сразу же будет ограничение по max-width (да и max-width не всегда прописано)
5 — в спецификации сказано, как сделать, чтобы img в обертке и без вела себя одинаково
6 — если все так же не видите ограничения по min-width для изображений, напишите свою версию разного сжатия в обоих случаях. А самое главное, почему при обнулении min-width поведение в обоих случаях одинаковое?

Почему изображение (img) в flex-контейнере ведет себя "странно"?

redfoxy19733, У текста - не сожмется меньше, чем самое длинное слово
У изображения - не будет сжиматься меньше собственной ширины, пока не дойдет уже до ограничения max-width (если max-width нет, то так и останется с внутренней шириной)
Как одно из решений устанавливать точечно min-width: 0 и для текста overflow-wrap: break-word; (чтобы прям длинные слова переносить)
Ну и про медиа запросы не забывать

Такое поведение у флекс элементов, чтобы они бесконечно не сжимались, в какой то момент просто произойдет переполнение. Поэтому и устанавливается min-width auto вместо 0.

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Ankhena,

Что картинка не уменьшается меньше родной ширины - не вижу.

Я такого и не утверждал - я сказал, что она упирается в это ограничение пока позволяет ширина контейнера.

К примеру, при ширине вьюпорта 880px ширина img упирается в ограничение и ее ширина 640px, при ширине вьюпорта 700 - она все так же остается шириной в 640px. В этом диапазоне она банально перестает сжиматься, пока позволяет ширина обертки (далее уже ограничение по максимальной ширине max-width: 100% позволяет больше сжиматься). В то же самое время при тех же вьюпортах изображение в div продолжает равномерно сжиматься. В этом и есть разница при сжатии в обеих случаях, на которую указал автор вопроса. И эта разница в сжатии устраняется только min-width: 0 для img — в таком случае отличий не будет.

Скриншоты были сделаны на ширине вьюпорта 731px и там видно ограничение ширины из-за min-width: auto.

Почему изображение (img) в flex-контейнере ведет себя "странно"?

Ankhena, В урле ещё есть dpr 2, если файл открыть в браузере, то ее ширина 640px. Без обертки img сжимается до 640px и на этой ширине фиксируется, пока позволяет место в контейнере. Когда img становится flex элементом, у нее min-width меняется с 0 на auto. В данном случае она сжимается до 640 пока позволяет ширина flex контейнера.
В случае с оберткой у img min-width 0, поэтому в двух случаях она сжимается по разному. С оберткой у нее нет ограничения по минимальной ширине.

Devtools firefox хорошо показывает эту разницу. Скриншоты выше.