垂直滚动条未在flexbox儿童中显示

发布于 2025-02-09 07:51:04 字数 831 浏览 1 评论 0原文

我希望顶部面板没有滚动条，并且两个底部面板都具有水平和垂直滚动条。

底面板的水平滚动条不起作用。

如果我删除顶级div，则滚动条的表现就很好。

<style>
  * {
    font-size: 200px;
  }

  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  .splitter {
    display: flex;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  .left {
    background-color: bisque;
    overflow: scroll;
  }
  .right {
    background-color: rgb(67, 228, 62);
    overflow: scroll;
  }
  .top {
    background-color: red;
  }
</style>
<div class="top">
  top
</div>
<div class="splitter">
  <div class="left">
    this is panel 1
  </div>
  <div class="right">
    this is panel 2
  </div>
</div>

原文

I want the top panel to have no scrollbars and the two bottom panels to have both horizontal and vertical scrollbars.

The horizontal scrollbars for the bottom panels do not work.

If I delete the top div, the scrollbars behave just fine.

<style>
  * {
    font-size: 200px;
  }

  html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  .splitter {
    display: flex;
    overflow: hidden;
    height: 100%;
    width: 100%;
  }
  .left {
    background-color: bisque;
    overflow: scroll;
  }
  .right {
    background-color: rgb(67, 228, 62);
    overflow: scroll;
  }
  .top {
    background-color: red;
  }
</style>
<div class="top">
  top
</div>
<div class="splitter">
  <div class="left">
    this is panel 1
  </div>
  <div class="right">
    this is panel 2
  </div>
</div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

鲸落 2025-02-16 07:51:04

这就是我设法使它正常工作的方式，您也许可以将其调整为自己的喜好。我认为，这种类型的布局孤立是可怕的，因为它对内容/设备没有响应。

* {
  font-size: 200px;
  box-sizing: border-box;
}

html,
body {
  max-height: 100%;
}

body {
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
}

.splitter {
  max-height: 90vh;
  flex: 50% 1 1;
  display: flex;
  overflow: hidden;
}

.left,
.right {
  overflow: scroll;
}

.left {
  background-color: bisque;
}

.right {
  background-color: rgb(67, 228, 62);
}

.top {
  background-color: red;
  flex: 50% 1 1;
}

<div class="top">
  top
</div>
<div class="splitter">
  <div class="left">
    this is panel 1
  </div>
  <div class="right">
    this is panel 2
  </div>
</div>

This is how I managed to get it working, you might be able to tweak it to your liking. I think this type of layout in isolation is terrible as it's not responsive to the content/device.

* {
  font-size: 200px;
  box-sizing: border-box;
}

html,
body {
  max-height: 100%;
}

body {
  display: flex;
  flex-flow: column nowrap;
  margin: 0;
}

.splitter {
  max-height: 90vh;
  flex: 50% 1 1;
  display: flex;
  overflow: hidden;
}

.left,
.right {
  overflow: scroll;
}

.left {
  background-color: bisque;
}

.right {
  background-color: rgb(67, 228, 62);
}

.top {
  background-color: red;
  flex: 50% 1 1;
}

<div class="top">
  top
</div>
<div class="splitter">
  <div class="left">
    this is panel 1
  </div>
  <div class="right">
    this is panel 2
  </div>
</div>

回复收藏 0 原文

~没有更多了~