无法使我的 Google 可视化饼图和 table 溢出滚动条正常工作

Question

在我的网页上，我使用了 Google 饼图和 table，这两者都会阻止页面完全响应移动宽度。我想在 table 和图形中添加溢出滚动条来解决这个问题。我已经尝试将溢出 CSS 添加到每个 div 和元素，并尝试使用一些 Google 的显示选项，但我似乎无法获得任何效果。

正如您在此图片中所见，页面响应度因图表宽度和 table 而取消：

但是，当您删除包含图表和 table 的那两个 div 时，页面响应将按预期运行。这就是为什么我希望溢出在 individual table+chart 部分滚动：

如果你想自己重新创建，我已经删除了所有不必要的代码并将所有代码更改为占位符。

HTML 文件:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="../css/stylesheet.css" rel="stylesheet" />
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
        <script type="text/javascript">
          google.charts.load("current", {packages:["corechart"]});
          google.charts.load('current', {'packages':['table']});
          google.charts.setOnLoadCallback(drawChart);
          google.charts.setOnLoadCallback(drawTable);
          function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['placeholder', 'placeholder'],
                ["placeholder", 83.65],["placeholder", 16.35]
            ]);
            var options = {
              title: 'placeholder',
              is3D: true,
              backgroundColor: '#F9F9F9',
              chartArea:{left:0,top:0,width:'100%',height:'100%'}
            };
            var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
            chart.draw(data, options);
          }
          function drawTable() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'placeholder');
            data.addColumn('number', 'placeholder');
            data.addColumn('number', 'placeholder');
            data.addColumn('number', 'placeholder');
            data.addColumn('number', 'placeholder');
            data.addRows([
                    ["placeholder", {v: 83.65, f: "83.65%"}, {v: 8000, f: "8000"}, {v: 300, f: "300"}, {v: 65, f: "65"}],
                    ["placeholder", {v: 16.35, f: "16.35%"}, {v: 1000, f: "1000"}, {v: 600, f: "600"}, {v: 35, f: "35"}]
            ]);
            var table = new google.visualization.Table(document.getElementById('table_div'));
            table.draw(data, {showRowNumber: false, width: '100%', height: '100%'});
          }
        </script>
    </head>
    <body>
        <div class="container">
            <div class="bodygrid">
                <div class="portalcontent">
                    <div class="portalheader">
                        <form class="fltrt" action="placeholder" method="post">
                            <input type="submit" value="LOGOUT" name="logout">
                        </form>
                        <h1>title</h1>
                    </div>
                    <div class="portalprofiletitle">
                        <h2>Profile</h2>
                    </div>
                    <div class="portalprofile">
                        <div class="changecontentcontainer">
                            <img src="placeholder.jpg" class="changecontent" />
                            <a href="">
                                <div class="changecontentmiddle">
                                    <div class="changecontenttext">Change Image</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="portalbio">
                        <div class="changecontentcontainer">
                            <p class="changecontent">placeholder</p>
                            <a href="">
                                <div class="changecontentmiddle">
                                    <div class="changecontenttext">Change Bio</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="portalpayout">
                        <form class="fltrt" action="placeholder" method="post">
                            <input type="submit" value="PAYOUT" name="payout">
                        </form>
                        <h3>Quaterly Earnings:</h3>
                    </div>
                    <div class="portalreleasestitle">
                        <h2>Releases</h2>
                    </div>
                    <div class="portalreleases">
                        <div class="slideshow-container">
                          <!-- Full-width images with number and caption text -->
                          <div class="mySlides fade">
                            <div class="changecontentcontainer">
                                <div class="changecontent">
                                    <img class="slideIMG" src="placeholder.jpg" alt="Release Artwork 1">
                                </div>
                                <a href="">
                                    <div class="changecontentmiddle">
                                        <div class="changecontenttext">Change Image</div>
                                    </div>
                                </a>
                            </div>
                          </div>
                          <div class="mySlides fade">
                            <a href="">
                                <img class="slideIMG" src="placeholder.jpg" alt="Release Artwork 2">
                            </a>
                          </div>
                          <div class="mySlides fade">
                            <a href="">
                                <img class="slideIMG" src="placeholder.jpg" alt="Release Artwork 3">
                            </a>
                          </div>
                          <!-- Next and previous buttons -->
                          <a class="prev">&#10094;</a>
                          <a class="next">&#10095;</a>
                          </div>
                          <br>
                        <!-- The dots/circles -->
                        <div class="centeralign">
                          <span class="dot"></span>
                          <span class="dot"></span>
                          <span class="dot"></span>
                        </div>
                    </div>
                    <div class="portalreleasechart">
                        <div id="piechart_3d"></div>
                    </div>
                    <div class="portalreleasetable">
                        <div id="table_div"></div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS 文件:

/* -------------- Body Styling -------------------- */
#wrapper {
  height:95vh;
  margin-right: auto;
  margin-left: auto;
  border-radius: 6px;
  background-color: #f2f2f2;
}
.bodygrid{
  position: relative;
}
.indexlogo{
  position: absolute;
  width: 80%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
label {
  display: block;
}
input {
display: block;
}
form em {
  color: red;
}
input[type="radio"] {
  display:inline-block;
}
input[type="email"] {
  width: 100%;
}
input[type="text"] {
  width: 100%;
}
textarea{
  width: 100%;
}
input[type="submit"]{
  margin-left: auto;
  margin-right: auto;
}
/* ----------------- General Styling --------------- */
html, body {
  width: 100%;
  height: 100%;
  background-color: #f2f2f2;
  margin: 0px;
}
h1{
  text-align: center;
  font-size: 60px;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
  color: #3b4d53;
  max-width: 100%;
}
h2 {
  margin-top: 0px;
  text-align: center;
}
.fltrt {
  float: right;
}
/* --------------------- Portal Styling -------------------- */
.portalcontent{
  display: grid;
  font-family: 'Josefin Sans', sans-serif;
  font-weight: bold;
  color: #3b4d53;
  background-color: #F9F9F9;
}
.portalcontent input{
  
}
.portalheader{
  grid-row-start: 1;
  grid-row-end: 1;
  grid-column-start: 1;
  grid-column-end: 7;
}
.portalprofiletitle{
  grid-row-start: 2;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 7;
  background-color: #f4f4f4;
}
.portalcontent h2{
  margin-top: revert;
}
.portalprofile, .portalprofile img{
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 3;
}
.portalbio{
  width: 100%;
  display: grid;
  align-items: center;
  grid-row-start: 3;
  grid-row-end: 3;
  grid-column-start: 3;
  grid-column-end: 7;
  text-align: justify;
}
.portalbio p{
  padding: 10px;
}
.portalpayout{
  grid-row-start: 4;
  grid-row-end: 4;
  grid-column-start: 1;
  grid-column-end: 7;
}
.portalreleasestitle{
  grid-row-start: 5;
  grid-row-end: 5;
  grid-column-start: 1;
  grid-column-end: 7;
  background-color: #f4f4f4;
}
.portalreleases, .portalreleases img{
  grid-row-start: 6;
  grid-row-end: 6;
  grid-column-start: 1;
  grid-column-end: 3;
  width: 100%;
}
.portalreleasechart{
  grid-row-start: 6;
  grid-row-end: 6;
  grid-column-start: 4;
  grid-column-end: 7;
  align-content: center;
  display: grid;
}
.portalreleasetable{
  grid-row-start: 7;
  grid-row-end: 7;
  grid-column-start: 1;
  grid-column-end: 7;
}
#piechart_3d{
  margin-left: auto;
  margin-right: auto;
}
.changecontent {
  opacity: 1;
  display: block;
  transition: .5s ease;
  backface-visibility: hidden;
}
.changecontentmiddle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.changecontenttext {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
.changecontentcontainer {
  position: relative;
}
.changecontentcontainer:hover .changecontent {
  opacity: 0.3;
}
.changecontentcontainer:hover .changecontentmiddle {
  opacity: 1;
}
/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* Hide the images by default */
.mySlides {
  display: none;
}
.slideIMG{
  width: 100%
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #717171;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

/* grid/responsivety */
.bodygrid{
  grid-area: body;
}
.container {
  min-height: 100%;
  display: grid;
  grid-template-columns: 1fr 18fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "left body right"
    "footer footer footer";
}

@media screen and (min-width: 59em) {
  .container {
    min-height: 100%;
      display: grid;
      grid-template-rows: auto 1fr auto;
      grid-template-columns: 1fr 2fr 1fr;
      grid-template-areas:
        "header header header"
        "left body right"
        "footer footer footer";
  }
}

@media screen and (max-width: 40em){
  .portalcontent{
    display: inherit;
  }
}

对这一切有点陌生，感谢支持！

Answer 1

你可以这样试试：

<div id="cont">
    <div class="portalreleasechart">
         <div id="piechart_3d"></div>
    </div>
    <div class="portalreleasetable">
         <div id="table_div"></div>
    </div>
</div>

Css :

#cont{
   display: inline-flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   overflow-y: scroll;
}

Answer 2

我意识到容器网格阻止了 table 使用它自己的溢出，并且删除它修复了它。剩下的图表，我通过将 overflow: hidden; 添加到 #piechart_3d CSS.

来修复

无法使我的 Google 可视化饼图和 table 溢出滚动条正常工作

can't get my Google Visualization pie chart and table overflow scrollbar to work

html

javascript

css

google-visualization