Рома Зварич

можно ли добиться такого адаптива при помощи flexbox

На Flexbox можно этого добиться дублированием нужного блока и отображением одного из них на каждом разрешении экрана.
Пример на Flexbox:
https://codepen.io/hisbvdis/pen/eYYGOQd

Пример на Grid:
https://codepen.io/hisbvdis/pen/ZEEXzgB

1. Почему флекс элементы с разным текстом занимают по ширине именно столько места? https://jsfiddle.net/hkz91s0f/1/

Количество содержимого в элементе влияет на его базовый размер. Чем больше содержимого - тем больше места, выделяемого под элемент

Можно ли при flex-direction: column, сделать высоту опять одинаковой?

Можно. Задайте для элемента с классом inner свойства
flex-grow: 1;
https://jsfiddle.net/hisbvdis/g7pzwdqt/1/

Почему блок на флексах не заполняет пустоту по вертикале?

Потому что для родителя заданы свойства align-items: flex-start; и align-content: flex-start;, что прижимает дочерние элементы к началу блока, не давая заполнять пространство по вертикали.
А из-за разного размера картинок, дочерние блоки занимают разную высоту.

P.S. Выложите более полный фрагмент кода, чтобы показать решение на нём.

Не знаю почему, но методом исключения заметил, что это свойство не работает из-за наличия следующего правила

html, body {
    overflow-x: hidden;
}

P.S. Если задать его не обоим тегам сразу (HTML и body), а только одному (например, только body), то блок с position:sticky работает корректно


Результат, если это правило закомментировать (всё работает)
https://codepen.io/hisbvdis/pen/BaBvKaa

Основная задача ограничить текст в пределах ячейки и поставить в месте его обрезания три точки

1) Элементу с классом .user-card__info задайте свойство overflow: hidden;
2) К дочерним элементам, которые нужно обрезать (в данном случае это элемент .user-card__position и user-card__email, задайте свойства

overflow: hidden;
text-overflow: ellipsis;

Результат:
https://codepen.io/hisbvdis/pen/XWryvaN

Это Flexbox.
Когда элементы не помещаются в контейнер, они начинают сжиматься, чтобы поместились.
Чтобы запретить картинке сжиматься, задайте элементу с классом .cart__product-image свойство flex-shrink: 0

Результат:
https://codepen.io/hisbvdis/pen/PoYaGzG?editors=1100

Момент №1:
Картинка = 470px

Задайте ей max-width: 100%

Момент №2
Кнопка слайдера выходит за рамки

Если Вы используете фреймворк Bootstrap, возможно есть смысл быть последовательным и соблюдать единообразие в коде.
Как минимум, придерживаться одного выбранного метода.
Ну и наверняка не хуже будет использовать функционал фреймворка там, где это возможно, а не где захочется, раз уж Вы выбрали использовать фреймворк.
Здесь речь не о быстродействии, а об удобстве поддержки кода для других разработчиков или даже для самого себя.

Для элемента, который должен находиться слева, задаёте класс ".left", а для того, что справа - ".right".

Результат:
https://codepen.io/hisbvdis/pen/bGbrpRa

Применять Flexbox к ссылке можно без проблем.
Вот только не очень понятно, как Вы хотите "центрировать" картинку и текст, ведь из-за Flexbox они расположатся рядом

.main-menu-wrap {
    display: flex;
}

.fixed-menu-logo {
    flex-basis: 40px;
}

.main-menu {
    flex-grow: 1;
}

1) С помощью width, min-width, max-width Вы манипулируете шириной дочерних элементов.
А с помощью свойств flex-shrink и flex-grow Вы распределяете между элементами недостающее или свободное пространство родителя соответственно при его недостаче или избытке.

2) Также, данные свойства влияют на элементы одинаково при изменении главной оси со "строки" на "колонку". Если же Вы зададите элементам ширину, например, 50%, а потом измените flex-direction на column, элементы начнут выстраиваться в колонку (друг под другом), но их ширина станет лишь 30% от родителя.
Это же касается и свойства "flex-basis", которое имеет преимущество в определенных ситуациях перед "width".

3) Никто не запрещает использовать "width".

Свойство justify-self относится к модулю CSS Grid и не работает при использовании в Flexbox.

Объясните, пожалуйста, почему не работает эта часть у первого ".wrap"

Потому что для родителя задано align-content: flex-start;, которое перекрывает align-self

Чтобы работало, родителю вместо align-content: flex-start; задайте align-items: flex-start;

Результат:
https://codepen.io/hisbvdis/pen/qBWZOmq

Для родителя можно задать еще justify-content: space-around;

Адаптивная вёрстка - это вёрстка, которая адаптируется под диапазон экранов с сохранением комфортного взаимодействия с интерфейсом. Делаете Вы её на Flexbox или на Float, не важно. С использование медиа запросов или без - не важно

Вы уверены, что правильно указали фрагменты кода?
В HTML-коде указан класс menu__items-wrap, а в CSS-коде селектор указан для класса header__menu__items-wrap

Может поэтому и не работает?

Сверстал для Вас пример макета.
Надеюсь, правильно понял вопрос.

Точки переходов можете сами подобрать.
Если есть дополнительные вопросы или я что-то неправильно понял, пишите

https://codepen.io/hisbvdis/pen/wVvVvw

Оказалось, что дело в браузере.

Windows 10.
Браузеры последних версий на данный момент:

• Chrome - работает НЕправильно (Blink)
  
• Opera - работает НЕправильно (Blink)
  
• Firefox - работает правильно (Gecko)
  
• Edge - работает правильно (Edge)
  
• IE11 - работает правильно 0_o (Trident)