How to make google maps container height fixed

Question

So i'm building a real estate app. in the listings results page i have 2 columns (think fo zillow for example) , 1 for the listings results the other for the google map with each location's pin on it. i'm having trouble making google map container height 100% of the vh fixed and the results column scrollable with the results. I will attach a photo showcasing my problem. Here's my code ( i'm using tailwind + react )

const [map, setMap] = useState(null)

    const onLoad = useCallback(function callback(map) {
        // This is just an example of getting and using the map instance!!! don't just blindly copy!
        const bounds = new window.google.maps.LatLngBounds(center);
        map.fitBounds(bounds);

        setMap(map)
    }, [])
 const containerStyle = {
        height:'100vh',
        width:'100%'
    };

 const center = {
        lat: -3.745,
        lng: -38.523
    };

return (<>
   { /* 2 grid columns one for the map and the other for the results> */}
    <div className="sm:grid sm:grid-cols-[1fr_850px]">
          <div className="grid-cols-1 h-screen">
                    {isLoaded ? (
                        <GoogleMap
                             // here goes the container style declared above 
                            mapContainerStyle={containerStyle}
                            center={center}
                            zoom={10}
                            onLoad={onLoad}
                            onUnmount={onUnmount}
                        >
                            <></>
                        </GoogleMap>
                    ) : <></>}
            </div>
            <div className="bg-[#F5F7FB] sm:pt-20 ">
                 // here goes my properties code since it's too long i won't bother you with it since the problem is the parent height property.
            <div>
    </div>
</>

What am i doing wrong? When i remove the google map container and set a red background everything works fine but as soon as i put it back, it messes my whole layout. [![ail][1]][1]