强制滚动 flexbox 中溢出的项目答案

【问题标题】：Force to scroll overflowing item in flexbox强制滚动 flexbox 中溢出的项目
【发布时间】：2022-02-09 19:17:27
【问题描述】：

我正在制作一个带有 3 张卡片的容器。每张卡片（例如棕色）都有一个带有标题（沙色）和内容（蓝色）的标题。

我想要实现的是当卡片关闭时（例如单击标题），内容（蓝色）正在过渡到高度 0，因此唯一可见的部分是标题。

此外，当卡片打开时，我想显示可用内容，但只有在容器中有足够可用空间时（绿色）。

3张卡片打开时高度相同（容器内均匀展开），剩余内容（蓝色）滚动。

可以制作吗？我准备了一个democodesandbox

【问题讨论】：

如果它应该一次打开一张卡片，您可以使用javascript获取剩余高度，并将其设置为max-height in .content

标签： javascript html css reactjs flexbox

【解决方案1】：

我使用 styled-components 做了一个小代码示例（只是因为我喜欢它），您可以轻松地将其更改为使用 css 的常规反应组件，但这证明了这个想法。

我创建了 3 个盒子，每个盒子都有一个默认高度（40px），点击（打开它）后，它的高度设置为：100%。

用弹性容器包装所有这些盒子就可以了。

import styled from 'styled-components';
import React, { useState } from 'react';

const MyComponent = () => {
  return (
    <Container>
      <BoxContainer height={100} number={1} />
      <BoxContainer height={100} number={2} />
      <BoxContainer number={3} />
    </Container>
  );
};

export default MyComponent;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 200px;
  height: 400px;
  overflow: hidden;
  border: 1px solid black;
  background-color: blue;
`;

const BoxContainer = ({ number, height = '100' }) => {
  const [open, setOpen] = useState(false);

  return (
    <Box style={{ height: open ? '100%' : '40px' }} onClick={() => setOpen(!open)}>
      Box: {number}
      {open && <p>Content</p>}
    </Box>
  );
};

const Box = styled.div`
  width: 100%;
  overflow: scroll;
  background-color: #00b8a2;
  border: 1px solid red;
`;

此处的沙盒示例：https://codesandbox.io/s/boxes-fill-container-evenly-when-opened-btlvb

【讨论】：

感谢您的回复，但不幸的是，它不是满足我上述问题的解决方案。
请问，我错过了什么？在我的解决方案中什么不能按预期工作？