У меня есть страница макета с двумя столбцами, и я хочу, чтобы она отвечала этим требованиям:
- Правый столбец может содержать большую сетку данных, и пользователь должен иметь возможность прокручивать ее по вертикали. и горизонтально. Слишком много, чтобы показывать все это на странице сразу.
- Левый столбец, имеющий небольшую ширину и небольшую высоту, всегда должен появляться на странице для размера экрана xl.
- В левом столбце есть две кнопки, которые должны отображаться в нижней части страницы для размера экрана xl.
- Страница должна реагировать на размеры экрана планшета. На планшете правая колонка должна скользить ниже левой колонки и должна по-прежнему иметь горизонтальную прокрутку. Допустимо (хотя и не оптимально), чтобы она сохраняла и вертикальную полосу прокрутки.
У меня это работает, за исключением того, чтобы сделать правую колонку горизонтально прокручиваемой. Как получить горизонтальную прокрутку для правого столбца?
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css" />
</head>
<body>
<div class="container-fluid h-100">
<div class="p-2 h-100">
<div class="row d-flex h-100">
<div class="col-xl-3 col-sm-12 d-flex flex-column h-100 align-items-start">
<h2>Left Column</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="mt-auto">
<button href="javascript:void(0)">Button 1</button>
<button href="javascript:void(0)">Button 2</button>
</div>
</div>
<div class="col-xl-9 col-sm-12 d-flex flex-column h-100" align="center">
<h2>Right Column</h2>
<div class="limited mb-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
CSS:
html, body {
height: 100%
}
.limited {
flex-basis: 0px;
flex-grow: 1;
overflow-y: auto;
}