嵌套的 flexbox 溢出：滚动不起作用

Question

我正在尝试创建一个 3 列布局，其中一列在溢出时滚动。

我有一个工作原型 here in this code sandbox。

看起来像这样：

teal/cyan 颜色是溢出滚动部分 - 最顶部 parent 的填充在框架周围可见，呈灰色。

不起作用的部分 - 是当我想 embed/nest 在另一个还包含 header 的 flexbox 中使用这个工作 flexbox -但是当我这样做时，这个包含的滚动中断 - 整个 flexbox 溢出屏幕。

Codesandbox of version that doesn't work

截图：

我想我不明白关于 flexbox 大小的一些事情，因为我尝试过不同的 height/flex 值，但无法解决这个问题。

我做错了什么？

P.S。我将 Chakra-UI 用于组件+样式 - 但属性与原版 CSS 相同。我认为这对这个问题没有任何影响。标记更简洁。

Answer 1

将 h="100%" 添加到父 Flex 容器，从第一个子 Flex 容器中删除 h="100%" 并向其添加 minH="0" 会得到所需的结果。

这里的问题是父级的高度是无限的，这意味着子级可以尽可能多地占据 space 并且由于子级设置为 [=14]，父级将回流以解决这个问题=].

import React from "react";
import _ from "lodash";
import {
  Flex,
  Box,
  Center,
  UnorderedList,
  ListItem,
  Heading
} from "@chakra-ui/react";

const Container = (props) => {
  const list = [];
  _.times(100, (i) => list.push(`Item ${i}`));

  return (
    <Flex id="container" flex={1} direction="column" h="100%">
      <Center id="header" h="75px" bg="yellow.300">
        <Heading>Flexbox Scroll Overflow Prototype</Heading>
      </Center>
      <Flex
        id="3-col-container"
        flex={1}
        bg="gray.100"
        p={4}
        minH="0"
        alignItems="stretch"
        gridColumnGap={2}
      >
        <Flex flex={1} bg="gray.50" direction="column" gridRowGap={2}>
          <Box minH="200px" bg="gray.500" />
          <Flex
            direction="column"
            pl={4}
            pt={2}
            flex={1}
            bg="teal.100"
            overflow="scroll"
          >
            <UnorderedList>
              {list.map((item) => (
                <ListItem mb={1} listStyleType="none" color="gray.700">
                  {item}
                </ListItem>
              ))}
            </UnorderedList>
          </Flex>
        </Flex>
        <Flex flex={1} bg="blue.100" />
        <Flex flex={1} bg="blue.200" />
      </Flex>
    </Flex>
  );
};

export default Container;

Answer 2

解决方案

将此添加到您的代码中：

#container {
  height: calc(100vh - 75px);
}

#header {
  flex-shrink: 0;
}

说明

列容器上的 height: 100% 不工作。

这是因为它的 parent 没有定义高度，正如使用百分比值时 height 定义所要求的那样。

通过从百分比值切换，滚动功能起作用。

通过减去 header 的高度，可以防止不必要的溢出。

#container {
   height: calc(100vh - 75px);
}

在某些浏览器中，尽管 calc 公式，header 仍可能收缩（请记住它存在于 column-direction 弹性容器中）。我猜这是因为渲染引擎在其他规则之前考虑了 height: 100vh。

要避免跨浏览器出现这种情况，只需禁用 flex-shrink。

#header {
  flex-shrink: 0;
}

更多关于使用 height 属性和百分比值的信息。

更多关于 overflow 属性。

一般来说，要使 overflow 属性正常工作，需要固定长度。

这样想：使用动态长度，溢出是不可能的，因为元素只是收缩或扩展以满足需要。

MDN 是这样说的：

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

^{https://developer.mozilla.org/en-US/docs/Web/CSS/overflow}

嵌套的 flexbox 溢出：滚动不起作用

Nested flexbox's overflow: scroll not working

html

css

overflow

flexbox

解决方案

说明