可滚动div的扩展问题

Question

我正在使用 tailwindcss 制作一个完整页面的网站/仪表板，但我遇到了溢出滚动的问题。它不是让我的 div 可滚动，而是扩展了 div。

整个绿色开发应该保持相同的大小。

我尝试了很多技术，但我认为问题来自于 Flexbox 的处理方式，而我还没有掌握所有内容。

我的猜测是，将高度设置为 100% 并不能解决溢出问题。如果是这样，我如何在不自己修复高度的情况下更改它（如果可能的话，我不想对其进行硬编码）？

<div className="h-screen w-screen bg-black flex flex-col p-5">
    <div className="h-40 min-h-40 bg-red-600 mb-5"></div>
    <div className="h-40 min-h-40 bg-blue-600 mb-5"></div>
    <div className="flex-auto flex gap-5 p-5 bg-green-600">
        <div className="flex flex-col h-full gap-5 p-5 w-96 bg-yellow-400">
            <div className="flex-1 bg-slate-600"></div>
            <div className="flex-1  bg-slate-600"></div>
        </div>
        <div className="h-full flex-auto bg-fuchsia-700 p-5 overflow-hidden overflow-y-scroll max-h-full">
            {[...Array(2)].map((_, index) => (
            <div className="flex w-full h-[75px] bg-yellow-950 mb-5">
            {/* ...content... */}
            </div>            
            ))}
        </div>
    </div>
</div>

这是 codepen 上的复制品：https://codepen.io/AlllexxTh/pen/bNbKgaq?editors=1000

编辑：由于我的 tailwindcss 代码可能不清楚，因此我使用标准 Html css 和另一个 codepen 添加代码： https://codepen.io/AlllexxTh/pen/EaYRoEj

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Demo</title>
  </head>
  <body>
    <div class="screen">
      <div class="header"></div>
      <div class="header"></div>
      <div class="dashboard">
        <div class="dash-container-1">
          <div class="box"></div>
          <div class="box"></div>
        </div>
        <div class="scroll-container">
          <div class="scroll-element"></div>
          ADD MORE 'scroll-element's
        </div>
      </div>
    </div>
  </body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.screen {
  height: 100vh;
  width: 100vw;
  padding: 10px;
  background-color: black;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header {
  height: 150px;
  background-color: blue;
}

.dashboard {
  padding: 10px;
  gap: 10px;
  background-color: blue;
  display: flex;
  flex: 1;
}

.dash-container-1 {
  width: 400px;
  background-color: green;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
}

.box {
  background-color: gray;
  flex: 1;
}

.scroll-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
  flex: 1;
  background-color: red;
  overflow-y: scroll;
}

.scroll-element {
  width: 100%;
  background-color: yellow;
  height: 100px;
}

感谢您的帮助！

function extend() {
  const scroller = document.getElementsByClassName("scroll-container")[0];
  scroller.innerHTML = '<div class="scroll-element"></div>' +
    scroller.innerHTML;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.screen {
  height: 100vh;
  width: 100vw;
  padding: 10px;
  background-color: black;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header {
  height: 150px;
  background-color: blue;
}

.dashboard {
  padding: 10px;
  gap: 10px;
  background-color: blue;
  display: flex;
  flex: 1;
}

.dash-container-1 {
  width: 400px;
  background-color: green;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
}

.box {
  background-color: gray;
  flex: 1;
}

.scroll-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
  flex: 1;
  background-color: red;
  overflow-y: scroll;
}

.scroll-element {
  width: 100%;
  background-color: yellow;
  height: 100px;
}

<div class="screen">
  <div class="header"></div>
  <div class="header"></div>
  <div class="dashboard">
    <div class="dash-container-1">
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="scroll-container">
      <div class="scroll-element"></div>
      <button onclick="extend()">ADD MORE 'scroll-element's</button>
    </div>
  </div>
</div>

Answer 1

事实证明，该网站上对此主题有一些分析：为什么弹性项目不缩小超过内容大小？

该页面的关键是，对于嵌套的弹性容器，您也必须对外部容器做一些事情，否则它只会增长。

```
dashboard
```
是罪魁祸首，它的
```
overflow
```
现在被设置为
```
hidden
```
然后它就有点工作了，就像滚动条项目也是弹性项目一样，它们开始缩小，所以作为一个最小的改变，我只是将
```
height: 100px;
```
更改为
```
min-height: 100px;
```
。又快又脏。

function extend() {
  const scroller = document.getElementsByClassName("scroll-container")[0];
  scroller.innerHTML += '<div class="scroll-element"></div>'
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.screen {
  height: 100vh;
  width: 100vw;
  padding: 10px;
  background-color: black;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.header {
  height: 150px;
  background-color: blue;
}

.dashboard {
  padding: 10px;
  gap: 10px;
  background-color: blue;
  display: flex;
  flex: 1;
  overflow: hidden;  /* <------------------------------------- */
}

.dash-container-1 {
  width: 400px;
  background-color: green;
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
}

.box {
  background-color: gray;
  flex: 1;
}

.scroll-container {
  display: flex;
  flex-direction: column;
  padding: 10px;
  gap: 10px;
  flex: 1;
  background-color: red;
  overflow-y: scroll;
}

.scroll-element {
  width: 100%;
  background-color: yellow;
  min-height: 100px;  /* <--------------------------------------- */
}

<div class="screen">
  <div class="header"></div>
  <div class="header"></div>
  <div class="dashboard">
    <div class="dash-container-1">
      <div class="box"></div>
      <div class="box"></div>
    </div>
    <div class="scroll-container">
      <button onclick="extend()">ADD MORE 'scroll-element's</button>
      <div class="scroll-element"></div>
    </div>
  </div>
</div>

（并将添加按钮移至滚动条顶部）

可滚动div的扩展问题

问题描述投票：0回答：1

1个回答

最新问题

可滚动div的扩展问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1