Как сделать ширину блока в контейнере до конца окна браузера?

Question

[woxit]

Как можно сделать блок .map шириной до конца правой стороны окна браузера. Проблема в том что этот блок лежит в колонке а она в фиксированном контейнере который выровнен по ширине. Причем блок .map не должен выходить за рамки окна браузера при любом изменении ширины окна.

Тут пример

https://codepen.io/woxit/pen/YzBKjyo

Answer 1

[Никита Геннадич]

Если ничего не менять в вашей вёрстке, на ум приходит только вариант вот такой (добавить блок map-inner внутрь map):

.content {
  height: 100vh;
}
.map {
  max-height: 100vh;
  background-color: #eee;
}
.map-inner {
  margin-top: 8px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background-color: #23fe12;
}

Но это будет работать только если у вас нет необходимости задавать в абсолютных единицах высоту .content, как это было сделано в вашем примере. А также если у вас отступ от верхней части не меняется (поскольку тут используется абсолютное позиционирование).

А лично я бы вовсе по другому сделал. Кмк тут логичнее сделать вот так:

<div class="container">
	<div class="row">
    <div class="map"></div>
		<div class="col">
			<div class="content">content</div>
		</div>
	</div>
</div>

.container {
  max-width: 400px;
  margin: 0 auto;
}
.row {
  display: flex;
}
.col {
  flex: 1 1 60%;
  border: 1px solid #aaa;
}
.content {
  height: 1000px;
}
.map {
  height: 100%;
  max-height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
  background-color: #eee;
}

И от этого уже отталкивался бы...