Как добавить паддинг от блока во флекс контейнере сохранив одинаковую ширину?

Question

[godsplane]

https://codepen.io/poylar/pen/MWVNRrE?editors=1000
Суть в том что при добавлении паддинга блоку слева правый блок ужимается, скорее всего это из-за margin__container ,но мне он тоже нуже чтобы добавить оступ = отступу контейнера.
Как сохранить шиирну по 50% не задавая эту самую ширину в 50%
Я хочу такой оступ:

Comments

[Ankhena]

Как сохранить шиирну по 50% не задавая эту самую ширину в 50%

Задайте flex-basis, если не хотите ширину.

А вообще гридами это делается заметно проще. И не нужна та история с margin.

[godsplane]

Ankhena, с гридами у меня margin__container тоже влево улетал

[godsplane]

Ankhena, или как сохранить оступ = оступу в у контейнера в гридах?

[Ankhena]

godsplane,

или как сохранить оступ = оступу в у контейнера в гридах?

я не смогла расшифровать это

[godsplane]

Ankhena, сори. я имеюю ввиду как грид элменту задать оступ внутри ранвый оступу контейнера?(Как например сейчас реализованное в margin__container)

[Ankhena]

godsplane, давайте вы покажете на скринах и расскажете исходную задачу, а не какие-то производные от неё.

Потому что сейчас .margin__container имеет левый отступ calc(50% - var(--container-width) / 2)
Вы хотите задать ему же правый паддинг равный этому margin, но пишете 100px.

Это https://codepen.io/Websitio/pen/poyemJv вы чтоль изобретаете?

[godsplane]

Ankhena, https://codepen.io/poylar/pen/ZEozQGL накидал более поняный пример.
Я хочу такое выравниевание

Без паддингов и чтобы это сужаолсь пропорционально экрану, то есть эти оступы не нужно на 1300 уже

[Ankhena]

godsplane, ну и поставьте два одинаковых margin для block__inner (через calc).

Но не знаю, что вы планировали делать на 4к, когда места для контента совсем не останется.

[godsplane]

Ankhena, а calc то на основе чего?И почему на 4к места не останется если его станет больше?

[Ankhena]

godsplane,

И почему на 4к места не останется если его станет больше?

максимальная ширина красного блока 1200.
Левый magrin от края окна до левого края блока 1200.
Размер окна растет => размер отступа растет.
Но вы же хотите чтобы справа был отступ такого же размера...

На 3000 отступ будет 900, два отступа 1800.
Всего левый блок занимает половину ширины (отступ между блоками опустим для простоты) = 1500.
Из которых 1800 ушло на отступы.

а calc то на основе чего?

На основе ширины в %, половины ширины красного контейнера и gap.

Answer 1

[FeST1VaL]

Оберните содержимое левого блока и дайте ему паддинг

Comments

[godsplane]

но margin__container тогда улетает влево

[FeST1VaL]

godsplane, кто куда улетает

spoiler

[godsplane]

FeST1VaL, окно уменьшите по ширне до 1300 гдето

[FeST1VaL]

godsplane, ну так это ваш margin в - уходит. Я не понимаю что вы хотите в итоге сделать... после 1300px вы можете убирать margin