Question

如果您在Chrome中运行下面提到的代码，则会获得理想的结果。包裹这两个部分的内部容器（当浏览器窗口缩小时）将显示一个垂直滚动条。

但是，如果您在Edge或Firefox中执行相同的操作，则浏览器只是在整个页面上而不是在给定的容器元素上显示一个垂直滚动条。

我如何才能使其至少在现代浏览器（Edge，Chrome和Firefox）上保持一致？

我有以下内容：

body {
  margin: 0;
}

.header,
.footer,
.messagebar {
  display: flex;
  height: 4rem;
  padding: 10px 50px;
  border: 1px solid lightgray;
}

.container,
.section {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.scrollable {
  overflow-y: auto;
  overflow-x: hidden;
}

.section {
  margin: 10px 20px;
  flex-basis: 45%;
  flex-grow: 0;
}

.content {
  display: flex;
  flex-grow: 1;
}

<body style="display:flex;flex-direction:column;flex-grow:1;height:100vh;">
  <div class="header">This is the header</div>

  <div class="content">
    <div class="container">
      <div class="menu">This is the menu</div>
      <div class="container">
        <div class="container scrollable" style="flex-direction: row;flex-wrap:wrap">
          <div class="section">
            <div>This is some content ...</div>
            <div>A table of data</div>
          </div>
          <div class="section">
            <div>This is further content ...</div>
            <div>A table of other data</div>
          </div>
        </div>
      </div>
      <div class="messagebar">This is a message</div>
    </div>
  </div>

  <div class="footer">This is the footer</div>
</body>

要确切了解我在说什么，请运行代码段，然后选择“整页”选项。

一旦页面显示在其自己的窗口中，就可以调整窗口大小。水平调整大小应导致右侧部分环绕在左侧部分下方。垂直调整大小，直到获得垂直滚动条。在Chrome和Firefox中执行此操作，您将在垂直滚动条中看到差异。

Answer 1

我认为没有定义一定的高度。添加特定的高度或最大高度，如下所示。

# convert to data table
setDT(df)

# convert it to long format and select the columns to used
df1 <- melt(df, id.vars=1:2)
df1 <- df1[,c(1,2,4)]

# get top values year and country
df1 <- df1[,top_value := .(list(sort(value, decreasing = T))), .(Year, Country)][,.(Year, Country, top_value)]

print(df1)

   Year Country   top_value
 1: 2000     ALB 501,500,497
 2: 2001     ALB            
 3: 2000     ARG 502,487,354
 4: 2001     ARG            
 5: 2000     ALB 501,500,497
 6: 2001     ALB            
 7: 2000     ARG 502,487,354
 8: 2001     ARG            
 9: 2000     ALB 501,500,497
10: 2001     ALB            
11: 2000     ARG 502,487,354
12: 2001     ARG

Answer 2

感谢CssTricks的Pogany！

答案是将以下内容添加到我的.scrollable类中

.scrollable{
   ...
   height: calc(100vh - 14rem);
}

这似乎很吸引人！

滚动html元素仅在Chrome中有效

2 个答案: