使用 flexbox，在 flexitem 内的 div 上显示滚动条答案

【问题标题】：With flexbox, show scrollbar on div inside a flexitem使用 flexbox，在 flexitem 内的 div 上显示滚动条
【发布时间】：2019-06-03 06:17:20
【问题描述】：

我正在尝试使用 Bootstrap flex 设置我的 HTML 网站。我想要一个布局，其中内部 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“填充器”，我希望它在 div“滚动器”上。

我该如何解决这个问题？

【问题讨论】：

请发布足够的代码来重现问题。

标签： html twitter-bootstrap css flexbox

【解决方案1】：

id 为 scroller 的 div 中必须有高度。

添加了 100px 高度和溢出：自动；内联样式

<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>

【讨论】：

如果我希望高度是动态的并填满页面的其余部分怎么办？ :)

【解决方案2】：

尝试在较小的设备上全屏查看，您应该编写媒体查询。

<!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>

【讨论】：