Как вытянуть элемент на всю ширину, при условии что второй элемент скрыт или удалён?

Question

[historydev]

У меня будет sidebar который будет двигать контент, у меня есть шапка которую он тоже будет двигать, задав шапке 100% она сползает под бар, если задать 100%-300px min-width и width: auto не увеличивается блок. Вот я примерчик сделал, как оно себя ведёт. Подскажите пожалуйста как можно этого достичь чистым css если это возможно. (Кликайте, ширина будет уменьшаться красного блока, он играет роль sidebar)

Answer 1

[Danny Arty]

.right {
  width: calc(100% - 300px);
  height: 300px;
  background: blue;
  flex-grow: 1; /*добавить эту строчку*/
}

Comments

[Danny Arty]

Sergei Nazarenko, добавил codepen в ответ, кликай на синий блок

[historydev]

Danny Arty, спасибо! Именно это мне и было нужно

[historydev]

Sergei Nazarenko, ты всё ещё ничего не понял) сутки прошли

[historydev]

Sergei Nazarenko, не драматизируй, я объясню ещё раз, у меня есть sidebar который должен смещать контент при изменении его размера (блок left) и сам контент (блок right), я не хочу каждый раз прибегать к js и считать сколько мне там нужно убирать пикселей чтобы всё поместилось. Но с помощью js я буду изменять размер блока left, а точнее вешать класс который будет изменять размер и это всё с чем у меня js в данной задаче работать должен.

[Danny Arty]

Sergei Nazarenko, ты бы прочитал его комменты под твоим ответом, нормально прочитал бы вопрос, вместо того, чтобы спорить как дитя и язвить.

[Danny Arty]

Владимир, не за что, успехов!

[Danny Arty]

Sergei Nazarenko, лол, даже не знал, что он заблочен где то

[historydev]

Sergei Nazarenko, нет моей вины в том, что ты в примитивах задачу не можешь понять, trello тоже в бане, но юзают с впн и не парятся.

[historydev]

Danny Arty, Если добавить третий блок, всё ломается:

[historydev]

Danny Arty, кстати если убрать шарину у контента, flex-wrap не работает, всё втискивается в текущее пространство. Но работает flex-grow

[Danny Arty]

Владимир, стоит лишь немного подумать и посмотреть, что там в стилях натыкано и все встанет на свои места. У тебя указано свойство flex-wrap: wrap, у тебя указаны явные значения ширины для элементов и тд.

[historydev]

Danny Arty, я могу объединить их в блок и будет работать, но тогда у меня вниз уедет контент, вот смотрите:

[historydev]

Danny Arty, такое не подходит, left блок - sidebar, right блок - header, another блок - main content, я давно не верстал, у меня ts/node в основном, многое очевидное забыл уже

[Danny Arty]

Владимир, ничего не понял. Ваши скрины ни о чем не говорят. Лучше воспроизведите конкретно ваш код в песочнице и получите точный ответ, вместо гаданий

[historydev]

Danny Arty, сделал уже, спасибо! Обернул контент + шапку в блок, sidebar отдельно:

<div class="container">
	<app-side-bar></app-side-bar>
	<div class="box">
		<app-header></app-header>
		<router-outlet></router-outlet>
		<app-push-notification></app-push-notification>
		<app-call-notification></app-call-notification>
	</div>
</div>

[Sergei Nazarenko]

Владимир, оке