Каким образом можно сделать, чтобы блок .map располагался на всю ширину правой стороны окна браузера, при условии, что этот блок находится в колонке, а колонка в свою очередь находится в фиксированном контейнере, выровненном по ширине? Основное требование состоит в том, чтобы блок .map не выходил за пределы рамок окна браузера при любых изменениях ширины окна. Вот пример: [ссылка на пример](https://codepen.io/woxit/pen/YzBKjyo)
Для того чтобы ширина блока внутри контейнера занимала всю доступную ширину окна браузера, можно воспользоваться свойством CSS `width: 100%`.
В случае с блоком `.map`, чтобы он занимал всю ширину правой стороны окна браузера, нужно применить следующие стили:
```css
.column {
display: flex;
}
.map {
flex-grow: 1;
width: 100%;
}
```
В данном случае, `.column` имеет свойство `display: flex`, которое позволяет ей занимать всю доступную ширину. А блок `.map` имеет свойства `flex-grow: 1` и `width: 100%`, которые заставляют его растягиваться и занимать все доступное пространство.
Также, чтобы избежать выхода блока `.map` за пределы рамок окна браузера при изменении ширины окна, можно применить свойство CSS `max-width: 100%`:
```css
.map {
flex-grow: 1;
width: 100%;
max-width: 100%;
}
```
Теперь блок `.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;
}
<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;
}