时间戳

首页 > 解决方案 > 禁止父 div 宽度动态高度扩展以适应子内容

html - 禁止父 div 宽度动态高度扩展以适应子内容

问题描述

我有一个container适合整个视口的nav,main和footer节点。该main节点需要填充页面的所有可用空间，因此它的高度是动态的。在main节点内部，我有一个简短的节点层次结构，其中cats节点可能不适合父节点。

 <div class="container">
  <nav>
    <input />
  </nav>
  <main>
    <div class="scrollable">
       <div class="cats">
          <img src="https://placekitten.com/300/300" />
          <img src="https://placekitten.com/300/300" />
          <img src="https://placekitten.com/300/300" />
          <img src="https://placekitten.com/300/300" />
      </div>
    </div>
    <div class="cat">
      <img src="https://placekitten.com/280/280" />
    </div>
  </main>
  <footer>
    <button>
      Click me!
    </button>
  </footer>
</div>

我想强制scrollable节点填充main父节点，但是当它的子节点溢出时，显示一个垂直滚动条。无论如何，我不希望main节点调整大小以适应子级，导致内容不适合视口。

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column
}

main {
  flex: 1;
  display: flex;
}

.scrollable {
  flex: 1;
  display: flex;
  overflow-y: scroll;
}

.cats {
  flex: 1;
  display: grid;
  grid-auto-columns: 1fr;
  grid-gap: 10px;
}

该解决方案在 Chrome 下有效。它不在 Firefox 下。我觉得这条链flex不是要走的路。我将感谢任何如何使它更普遍的点击。

这是一个工作小提琴：https ://jsfiddle.net/ktguLn73/13/

有趣的是，当我安装overflow-y: scroll节点main时，它可以在 Chrome 和 Firefox 中运行。但这不是我喜欢的结果。

感谢您的帮助。

标签： htmlcss

解决方案

我记得读过一篇有类似问题的文章，其中 Firefox 无法使用 flex oveflow 滚动。查看此页面，看看它是否有帮助：https ://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/

通读文章，容器上的 min-height: 0 解决了 Firefox 中布局的问题。

推荐阅读