Почему flex элемент выходит за пределы контейнера?

Question

[poproboval]

Здравствуйте!
Есть код . Красная линия это максимальная ширина контейнера, зелёная линия это ширина flex-элемента (класс .card). Я задаю классу .card flex: 0 0 auto; И в результате получаю не понятную ширину + выход за контейнер (это кстати очень странно я не ожидал это получить). Если классу .card задать flex: 0 1 auto; элемент растягивается на всю ширину контейнера. Но мне нужно чтобы flex-элемент был равен ширине его контента а не растягивался на всю ширину контейнера. Почему flex-элемент себя так странно ведёт?

Comments

[Mikhail Osher]

демку на codesandbox плз

[poproboval]

Mikhail Osher, код

[Danny Arty]

ну дык у вас у .card__column--text flex-basis: 595px;, если конечно я правильно понял о чем идет речь

[FrelFrloich]

.card{
flex: 0 0 100%;

[poproboval]

Danny Arty, .card__column--text flex-basis: 595px; это так и должно быть, это максимальная ширина колонки с текстом (так как я указал flex: 0 0 595px, я хочу ограничить не текст а всю колонку). а для .card__column--img flex 0 0 auto; padding-right: 125px; (flex 0 0 auto, ширина столбца равна содержимому), отсюда можно взять что ширина .card = 150px (ширина картинки) + 125px (padding) + 595px = 870px. 870px ширина .card , и для .card указывал flex: 0 0 auto; должно же выйти что ширина .card будет 870, но не нет, при flex: 0 0 auto; какая-то не понятная ширина, а при flex: 0 1 auto; ширина .card равна ширине контейнера 1050px, где мои 870px?

[poproboval]

FrelFrloich, если так указать то flex-элемент, будет равен ширине контейнеру, а нужно что бы он был равен ширине своему содержимому.

[poproboval]

Я так понял что проще указать в .card flex-basis: 870px (ширина контента .card), На сколько это будет правильно?

[FrelFrloich]

poproboval, тогда max-content

[poproboval]

FrelFrloich, хорошая идея, но поведение тоже самое.

Answer 1

[Александр Васильев]

Добрый день.

.card{
	flex: 1;
  border: 2px solid green;
  }

Comments

[poproboval]

flex: 1; тогда он растянется на всю ширину контейнера. А можно сделать так чтобы он растянулся на ширину которая равна содержимому flex-элемента? Или нет?

[Александр Васильев]

poproboval, благодарю за реакцию на мой ответ.
А это разве не то, что надо ?

[poproboval]

Александр Васильев, в классе .card__column--text flex: 0 0 595px; то есть ширина блока 595px + ширина картинки 150px + padding-right: 125px = 870px ширина контента. Почему блок .card растягивается на всю ширину контейнера а не на 870px?

[poproboval]

Александр Васильев, или моя логика не правильная?

[Александр Васильев]

Я уверен, что ответил на первый вопрос.
Могу предложить обсуждение вне пространства текущего ресурса, дабы не засорять эфир