Just trying to get myself familiarized with tailwind.

I have got a grid component in my React.Js project. The main purpose of this is to draw some vertical lines as an overlay. Here is what it looks like:

//hours are just some hours of the day
 return (
    <div className="w-full h-full inline-flex absolute">
      <div className="w-10" />
      {
        hours.map(_ =>
          <div className="flex-grow border-l-2 border-black h-full" />)
      }
    </div>);

Now I've a parent component, which has this grid component like:

const ParentX = ({ children }: Props) => {
  return (
    <div>
      <GridX />
      {
        children
      }
    </div>);
};

export { ParentX };

Now the problem I'm facing is, I want the grid to take height only the height parent is taking, noting more than that. So I put h-full. And the parent will take the height of the parent's children, JSX elements passed as props. Instead, it's taking the whole screen.

Here is a snap:

The end of those horizontal lines is the end of those child components. So my question is, why the vertical line is taking the full height? How can I just fill the parent?