主轴方向弹性项目溢出

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

对于这个问题我真的很抱歉，因为我已经在这里看到了很多类似的问题，但我仍然无法弄清楚。

我想创建一个带有 

overlay
元素控件的 
display
元素，其中控件垂直堆叠并与显示屏的右侧和底部对齐。有一个固定大小的元素 
buttons
包含一些控件，然后是一个动态大小的元素 
info
，仅当显示的某些部分处于活动状态时才会弹出。 
info
始终包含一个用于关闭自身的按钮以及一些动态高度信息。我希望 
info
容器始终缩小到其内容。但是，如果内容的高度太大，则包含 
info
的元素将高于 
overlay
容器的剩余垂直空间，我希望内容可以滚动。

我以为我只需要使用 Flex 容器和 

overflow-y
属性，但这似乎并不能解决问题。似乎只有当父容器有一些明确的高度时才会触发溢出，但在我的例子中，父容器是动态的，这意味着它应该增长到定义的高度，然后停止，同时内容变得可滚动。

这是我迄今为止的尝试：

const info = document.querySelector(".info");
const content = document.querySelector(".content");

document.querySelector("#open-info").addEventListener("click", () => {
  info.style.display = "flex";
});

document.querySelector("#close-info").addEventListener("click", () => {
  info.style.display = "none";
});

document.querySelector("#increase-height").addEventListener("click", () => {
  content.style.height = `${content.clientHeight + 30}px`;
});

document.querySelector("#decrease-height").addEventListener("click", () => {
  content.style.height = `${content.clientHeight - 30}px`;
});
.display {
  position: relative;
  width: 400px;
  height: 300px;
  background-color: gray;
}

.overlay {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  flex-shrink: 0;
  background-color: orange;
  padding: 10px;
  max-height: 230px;
  /* overflow works, but fixed size is undesirable, as the remaining space in main-axis direction should be used up */
  /* max-height: 100%; overflow doesn't work, as it refers to parent's height, not to remaining available space in main-axis direction*/
}

.info-content-wrapper {
  padding: 5px;
  overflow-x: hidden;
  overflow-y: auto;
}

.content {
  width: 80px;
  height: 150px;
  background-color: yellow;
}

.controls {
  background-color: lightblue;
  padding: 5px;
  flex: 0 0 auto;
}
<div class="display">
  <div class="overlay">
    <div class="info">
      <button id="close-info">Close</button>
      <div class="info-content-wrapper">
        <div class="content"></div>
      </div>
    </div>
    <div class="controls">
      <button id="open-info">Open info</button>
      <button id="increase-height">+</button>
      <button id="decrease-height">-</button>
    </div>
  </div>
</div>

在示例中，您可以使用按钮隐藏/显示信息，以及增加/减少内容高度。我在 

max-height: 230px
上使用了固定的 
.info
来演示它应该如何工作。但是，不应使用固定的 
max-height
，而应使用 Flex 容器的剩余垂直空间。但是当我使用 
max-height: 100%
时，它将（根据定义）指父级 Flex 容器的总高度。如果我进一步嵌套它（例如在 
.info
的内部 HTML 周围引入包装器）并将该元素的 
max-height
设置为 
100%
，它仍然不起作用。

我觉得答案应该非常简单，但我似乎无法找出仅使用弹性布局的解决方案，而不诉诸于

calc
的一些解决方法。我对此感到非常愚蠢，如果能得到一些帮助我会非常高兴！

html css flexbox
1个回答
0
投票

我已经编译了这个代码片段，你可以尝试一下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .display {
            position: relative;
            width: 400px;
            height: 300px;
            background-color: gray;
        }

        .overlay {
            position: absolute;
            display: flex;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            flex-direction: column;
            justify-content: flex-end;
            align-items: flex-end;
        }

        .info {
            display: none; /* Initially hidden */
            flex-shrink: 0;
            background-color: orange;
            padding: 10px;
            max-height: 230px; /* Shrink to content */
        }

        .info-content-wrapper {
            padding: 5px;
            overflow-y: auto; /* Scrollable if content exceeds height */
        }

        .content {
            width: 80px;
            height: 150px;
            background-color: yellow;
        }

        .controls {
            background-color: lightblue;
            padding: 5px;
            flex: 0 0 auto;
        }
    </style>
</head>
<body>
    <div class="display">
        <div class="overlay">
            <div class="info">
                <button id="close-info">Close</button>
                <div class="info-content-wrapper">
                    <div class="content"></div>
                </div>
            </div>
            <div class="controls">
                <button id="open-info">Open info</button>
                <button id="increase-height">+</button>
                <button id="decrease-height">-</button>
            </div>
        </div>
    </div>

    <script>
        const info = document.querySelector(".info");
        const content = document.querySelector(".content");

        document.querySelector("#open-info").addEventListener("click", () => {
            info.style.display = "flex";
        });

        document.querySelector("#close-info").addEventListener("click", () => {
            info.style.display = "none";
        });

        document.querySelector("#increase-height").addEventListener("click", () => {
            content.style.height = `${content.clientHeight + 30}px`;
        });

        document.querySelector("#decrease-height").addEventListener("click", () => {
            content.style.height = `${content.clientHeight - 30}px`;
        });
    </script>
</body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.