Make DIV expand to the size of parent div with Flexbox in tailwind

This seems to be a simple problem, but for some reason, its not working and IDK why.

I am using TailwindCSS, most of the classes are in tailwind, the only classes that are not within tailwind and that are used here are full-image, and limit-lines but they aren't relevant to this problem.

My HTML code is this:

<div className="col-span-3">
              <div>
                <img src={props.featuredImage.url} className="full-img"></img>
              </div>
              <div className="flex flex-col mt-3">
                <div className="">
                  <div>
                    <p className="font-normal text-sm text-gray-500">{`${moment(
                      props.createdAt
                    ).format("MMM DD, YYYY")} | 10 MIN READ`}</p>
                  </div>
                  <div className="mt-2 mb-2">
                    <p className="text-lg font-bold">{props.title}</p>
                  </div>
                  <div className="self-center">
                    <p className="limit-lines text-gray-500 text-md font-normal">
                      {props.excerpt}
                    </p>
                  </div>
                </div>
              </div>
            </div>

and this is the output that I am getting, and here the size of the screenshot actually shows the size of the parent div, but the flexbox div is not taking up the whole area. (The size of the parent div is the red area and the size of the flexbox div is the yellow area).

So my question here is, how do I make the size of the yellow div the same size of the red div with tailwind if possible? Thanks in Advance, I am sorry if the problem is very dumb I am new to webdev.