Javascript 在React中的循环中新追加div重叠

我正试图在第一个数组项之后的循环中添加一个新的

div

元素（

）。但是，其余的数组项应调整样式，而不显示新的

div

。这里我所有的

div

都是

CSS

组件。此外，所有这些都是

flex

项

代码：

<Chapters>
      {chapters.map((chapter, i) => {
        return (
          <ChapterContainer key={'chapter' + i}>
            <ChapterHeading>{`${chapter.chapter_heading}`}</ChapterHeading>
            <ChapterBody>{`${chapter.chapter_body_text}`}</ChapterBody>
            {i === 0 ? (
              <QuoteContainer display="visible">
                {quote_text}
              </QuoteContainer>
            ) : (
              <QuoteContainer display="none"></QuoteContainer>
            )}
          </ChapterContainer>
        );
      })}
    </Chapters>

 const Chapters = styled.div`
 display: flex;
 flex-direction: column;
 justify-content: space-between;
 align-items: right;
 margin-bottom: 67px;
`;

const ChapterContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
height: 180px;
width: 600px;
`;

const ChapterHeading = styled(Body2)``;

const ChapterBody = styled(Body3)`
color: white;
`;

const QuoteContainer = styled.div`
display: flex;
width: 486px;
height: 85.81px;
font-style: italic;
font-weight: normal;
padding: 67px 0px 67px 0px;
`;

问题 引用：时间飞逝的文本。显示在第二个

div

（标题2）的顶部重叠，并且在（标题2+段落文本）之后也有大量空白，因为div正好隐藏在那里。我需要对第一个

div

之后添加的“Quote”应用特定样式

尝试过

---

flex-grow

，但不起作用

请显示组件本身和CSSTry，删除您在

章容器

中指定的高度，并让内容定义height@ZohirSalak这将在第三个和第四个

div

之间保留一个空间。空格是

QuoteContainer

的大小。删除您在所有元素上定义的任何高度，让内容定义大小。请显示组件本身和CSSTry，删除您在

ChapterContainer

上指定的高度，让内容定义大小height@ZohirSalak这仍然会在两个对象之间保留一个空间第三和第四个

div

。空格是

QuoteContainer

的大小。删除在所有元素上定义的任何高度，并让内容定义大小。

Heading 1
This is a paragraph 1. 

      "Quote: Time does fly."

Heading 2
This is a paragraph 2.

Heading 3 
This is a paragraph 3.