редактировать: Решено, ответить в комментариях
Я пытаюсь заставить правую сторону этой вещи прокручивать, пока левая сторона остается на месте, но только в альбомной ориентации. У меня был некоторый успех с использованием position: fixed, но это потребовало бы обновления страницы при каждом переключении между альбомным / портретным, потому что карта не будет переключать стили. Сейчас я пытаюсь (и не могу) использовать overflow. Есть идеи как правильно это сделать?
https://codepen.io/dvtan/pen/mYrzqo
Копия кодового ручки:
<style>
@media (orientation: landscape) {
body {
display: flex;
flex-direction: row;
overflow: hidden;
}
body > div {
flex: 1;
}
#map {
height: 100vh;
}
#right {
overflow-y: scroll;
}
}
@media (orientation: portrait) {
#map {
height: 50vh;
}
}
</style>
<body>
<div id="left">
<div id="map"></div>
</div>
<div id="right">
scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>scrollable<br>
</div>
</body>
<script>
let leafletMap = L.map('map').fitBounds([
[45, -63],
[40, -124]
]);
let normalLayer = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
});
leafletMap.addLayer(normalLayer);
</script>