С flexbox, покажите полосу прокрутки на div внутри flexitem - PullRequest
Новая
       8

С flexbox, покажите полосу прокрутки на div внутри flexitem

0 голосов
/ 08 января 2019

Я пытаюсь настроить свой HTML-сайт, используя Bootstrap flex. Мне нужен макет, в котором внутренний div получает полосы прокрутки, а внешний div заполняет остальную часть страницы.

См. Этот пример; 

<div class="d-flex align-items-start flex-column" style="height: 100vh;">
<div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
<div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
<div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
<div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
<div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
<div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
<div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2 overflow-auto">
    <div style="background-color: darkcyan">
        <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson;" class="overflow-auto">
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
        <div>Flex item 8</div>
    </div>
</div>
<div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>

Теперь раскладка работает, как и ожидалось, но полоса прокрутки прикреплена к div "filler", и я хочу, чтобы она была в div "scroller".

Как я могу это исправить?

Ответы [ 2 ]

0 голосов
/ 10 января 2019

Попробуйте просмотреть на полном экране для небольших устройств, вы должны писать медиа-запросы. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<style>
#wrap{}
#wrap > div{ height:50px;}
#scroller{}
#wrap #filler { height:calc(100% - 50px * 7)}
</style>
<body>
<div class="d-flex align-items-start flex-column" style="height: 100vh;" id="wrap">
  <div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
  <div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
  <div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
  <div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
  <div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
  <div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
  <div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2">
    <div style="background-color: darkcyan; height:50px;">
      <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson; overflow:auto; height:calc(100% - 50px);" class="overflow-auto">
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
    </div>
  </div>
  
  <div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
</div>
</body>
</html>
0 голосов
/ 09 января 2019

В div с id scroller должна быть указана высота.

Добавлена ​​высота 100 пикселей и переполнение: авто; встроенный стиль 

<div class="d-flex align-items-start flex-column" style="height: 100vh;">
  <div style="background-color: red" class="ml-5 mr-5 p-2">Flex item 1</div>
  <div style="background-color: blue" class="ml-5 mr-5 p-2">Flex item 2</div>
  <div style="background-color: firebrick" class="ml-5 mr-5 p-2">Flex item 3</div>
  <div style="background-color: hotpink" class="ml-5 mr-5 p-2">Flex item 4</div>
  <div style="background-color: brown" class="ml-5 mr-5 p-2">Flex item 5</div>
  <div style="background-color: violet" class="ml-5 mr-5 p-2">Flex item 6</div>
  <div id="filler" style="background-color: magenta" class="mb-auto ml-5 mr-5 p-2 overflow-auto">
    <div style="background-color: darkcyan">
      <div>Flex item 7</div>
    </div>
    <div id="scroller" style="background-color: crimson; overflow:auto; height:100px;" class="overflow-auto">
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
      <div>Flex item 8</div>
    </div>
  </div>
  <div  style="background-color: green" class="ml-5 mr-5 p-2">Flex item 9</div>
</div>
...