Problem with nested flex containers. Inner container's item is not respecting its parent's width

Question

CodeSandbox: https://codesandbox.io/s/upbeat-sanne-mdh5s

I'll try to reproduce it here with a minimal example that I've built on CodeSandbox.

I've been having some troubles while keeping the proper width for a the items of a nested flex container. What I mean by nested, is that this (inner) flex container lives inside an another (outer) flex container.

Alright, I have an outer flex container that splits my layout into 2 columns. One column is for the main content and one for a side bar.

const Layout_DIV = styled.div`
  display: flex;                    // THIS IS THE OUTER FLEX CONTAINER
`;

const Content_DIV = styled.div`
  flex: 1 1 1000px;                 // THIS WILL EXPAND OR SHRINK WHEN NECESSARY
`;

const SideBar_DIV = styled.div`
  flex: 0 0 200px;                  // THIS RENDERS A SIDE BAR OF WIDTH 200px
`;

And inside that Content_DIV I have a carousel with overflow-hidden and I need to render some product cards inside of it.

const Carousel_DIV = styled.div`
  width: 100%;
  overflow: hidden;
`;

const FlexContainer_DIV = styled.div`
  display: flex;                            // THIS IS THE INNER FLEX CONTAINER
`;

const FlexItem_DIV = styled.div`
  flex: 0 0 25%;
`;

And inside those FlexItem_DIV I will render the product cards. With a thumbnail and a title. Since, the FlexItem_DIV has flex: 0 0 25%, only 4 cards should be visible at a time, and they should all fit inside Content_DIV

When I'm rendering only the thumbnails, everything works fine and I get the intended behavior. Nice!

But as soon as I add the product title, that behavior changes completely and everything gets messed up. Nothing fits anymore.

The only difference in those two GIFs above is the presence of the title. Literally nothing else was changed.

What I've tried:

• Lots of things. Including giving a px width for the flex item, instead of 25%
• I've also tried working with the white-space: wrap for the title, but nothing works.

What I think is causing this:

This seems to be caused by the presence of the outer flex container. I mean, that one that handles the split of the columns for the Content_DIV and SideBar_DIV.

Cause when I get rid of it (the outer flex container), then I get the desired behavior. See now that the SideBar is rendering below the Carousel and not on the right side anymore. Of course, I need it to be on the side and not below. That's why this solution does not work for me. But just to illustrate, I'll do this:

const Layout_DIV = styled.div`
  /* display: flex; */              <---- I'VE COMMENTED THIS LINE
`;

While this works as far as shrinking the title div and fitting everything on the screen, I really need the outer flex container so I can have the SideBar on the side, and not below.

PS: Tested both on Chrome and Firefox.

QUESTION

Has anyone seen this problem before? I need the behavior from the 1st GIF, but with the product titles present.

CodeSandbox: https://codesandbox.io/s/upbeat-sanne-mdh5s

EXTRA

I don't think this is relevant for the issue, but this is the code of the product card that renders inside 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;
`;