Если ничего не менять в вашей вёрстке, на ум приходит только вариант вот такой (добавить блок 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;
}
И от этого уже отталкивался бы...
