Flex item using percent width containing thumbnail and div with text won't resize with its parent?

Question

My problem:

Code details below.

When I render just the card thumbnail, I get the behavior that I need, which is: each card is always 25% of the width.

But when I add the card titles, I get this other behavior. Somehow the cards don't resize to fit the 25% width anymore.

This is the behavior I need (see GIF below):

It works when I remove this part of the code (see below). But I really need this part of the code. I can't remove it.

const Layout_DIV = styled.div`
  display: flex;
`;

const Content_DIV = styled.div`
  flex: 1 1 850px;                  // WILL SHRINK AND GROW WHEN NECESSARY
  border: 1px dotted silver;
`;

const SideBar_DIV = styled.div`
  flex: 0 0 350px;
  padding-left: 50px;
  border: 1px dotted silver;
`;

QUESTION

How can I get the cards with the titles to resize just like the thumbnail does?

Code SandBox with the code: https://codesandbox.io/s/patient-microservice-76w79

---

My main content is max 1200px and it's centered by these components:

const Container_DIV = styled.div`
  display: flex;
  justify-content: center;            // THIS WILL CENTER
`;

const MaxWidth_DIV = styled.div`
  width: 100%;
  flex: 0 1 1200px;                   // IT WILL SHRINK WHEN WIDTH IS LOWER THAN 1200
  padding-left: 16px;
  padding-right: 16px;
`;

These components are used to split my layout between content and side bar.

const Layout_DIV = styled.div`
  display: flex;
`;

const Content_DIV = styled.div`
  flex: 1 1 850px;                  // WILL SHRINK AND GROW WHEN NECESSARY
  border: 1px dotted silver;
`;

const SideBar_DIV = styled.div`
  flex: 0 0 350px;
  padding-left: 50px;
  border: 1px dotted silver;
`;

Now I need to render inside Content_DIV a carousel component that should have overflow: hidden and render card items that are 25% of its width, by using flex: 0 0 25%.

const Carousel_DIV = styled.div`
  width: 100%;
  overflow: hidden;                    // OVERFLOW SHOULD BE HIDDEN
`;

const FlexContainer_DIV = styled.div`
  display: flex;                       // THIS IS A FLEX CONTAINER (ITEMS WILL BE IN A SINGLE ROW)
`;

const FlexItem_DIV = styled.div`
  flex: 0 0 25%;                       // EACH ITEM SHOULD BE 25% (ONLY 4 ITEMS WILL BE VISIBLE)
`;

And these are the components I'm using for the card items (each card will render inside a FlexItem_DIV ):

const CardContainer_DIV = styled.div`

`;

const AspectRatio_DIV = styled.div`
  position: relative;
  height: 0;
  padding-top: 100%;
`;

const Thumbnail_DIV = styled.div`
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
`;

const Thumbnail_IMG = styled.img`
  width: 100%;
  height: 100%;
  object-fit: cover;
`;

const CardTitle_DIV = styled.div`
  width: 100%;
  max-width: 100%;
  font-size: 22px;
  font-weight: bold;
  line-height: 1.1em;
`;

This is the full component structure:

for (let i = 0; i < 10; i++) {
    thumbnailItems.push(
      <FlexItem_DIV key={i}>
        <CardContainer_DIV>
          <AspectRatio_DIV>
            <Thumbnail_DIV>
              <Thumbnail_IMG src={"http://lorempixel.com/640/480/abstract"} />
            </Thumbnail_DIV>
          </AspectRatio_DIV>
          <CardTitle_DIV>
            Commodi id suscipit voluptate sint cumque similique et magni
          </CardTitle_DIV>
        </CardContainer_DIV>
      </FlexItem_DIV>
    );
  }

  return (
    <Container_DIV>
      <MaxWidth_DIV>
        <Layout_DIV>
          <Content_DIV>
            <Carousel_DIV>
              <FlexContainer_DIV>{thumbnailItems}</FlexContainer_DIV>
            </Carousel_DIV>
          </Content_DIV>
          <SideBar_DIV>I am SideBar</SideBar_DIV>
        </Layout_DIV>
      </MaxWidth_DIV>
    </Container_DIV>
  );

UPDATE WITH EXTRA INFO

From further testing, it seems that when I add the CardTitle_DIV, it's like the FlexItem_DIV starts treating the 25% as 25% of the full window.innerWidth instead of the 25% of the Content_DIV where it's located.

Code SandBox with the code: https://codesandbox.io/s/patient-microservice-76w79