Я построил простой макет, как это:
Проблема: Я не могу прокрутить боковую панель, и если я пытаюсь прокрутить прокрутка всей страницы.
Первоначально макет был определен в GoogleMap. js с использованием styled-components :
import React, { Component } from 'react';
import styled from 'styled-components';
import GoogleMapReact from 'google-map-react';
import ShipTracker from '../components/ShipTracker';
import SideBar from '../components/SideBar';
const MapContainer = styled.div`
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 200px;
grid-gap: 10px;
height: 100vh;
grid-template-areas: "google-map sidebar" "ship-tracker sidebar";
.google-map {
background: #424242;
grid-area: google-map;
position: relative;
height: 100%;
width: 100%;
}
.map-sidebar {
background: #9dc183;
grid-area: sidebar;
}
.ship-tracker {
grid-area: ship-tracker;
}
`;
ниже фрагмент из SideBar. js: я должен упомянуть, что здесь используется React Card , так как SideBar будет заполняться определенным количеством карт с изображениями, описание и т. д. c:
const Sidebar = () => (
<div className="map-sidebar">
<Row>
<Col sm="11">
<Card className="mb-2">
<CardImg />
<CardBody>
<div>
<img src={image} alt="Atchafalaya" />
</div>
<td />
<CardTitle>
<h3>Atchafalaya</h3>
</CardTitle>
<CardText>
<h6>Project Details</h6>
<p>
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
</p>
Trailing Suction Hopper Dredge
</CardText>
<div class="btn-toolbar">
<button type="button" id="btnSubmit" class="btn btn-primary mr-3">
Download Project Specs
</button>
</div>
</CardBody>
</Card>
</Col>
</Row>
и связанных с ним SideBar. css:
html,
body,
.flex-vertical {
height: 100%;
margin: 0;
}
.flex-vertical {
display: flex;
flex-flow: column;
}
.map-sidebar {
display: flex;
flex-flow: column;
flex: 1;
overflow: hidden;
}
tbody {
overflow-y: scroll;
cursor: default;
}
Что я сделал до сих пор:
1) Я думаю, что проблема может быть в файле .css, и я пришел к лучшей (пока что) конфигурации, которую я поставил выше. Хотя я думал, что flex-flow: - это основной параметр, который нужно изменить для прокрутки боковой панели. Но это не сработало.
2) Я не уверен, что причиной такого поведения может быть styled-components. Причина, по которой я это говорю, заключается в том, что там произошло разделение макета. Так что я не уверен, что параметр position: может быть полезен для игры.
3) Возможно, в <div className="map-sidebar"> чего-то не хватает, но я не уверен, что может быть, если это так.
4) Наконец, я использовал React Card , так как SideBar будет заполнен Cards, содержащим различную информацию о кораблях.
Спасибо за указание в правильном направлении.