I'm not sure if this is a problem with my usage of infinite scroll or inadequate understanding of flexbox.
Here's some simplified code. Infinite Scroll is put in flexbox. The contents are a div using tailwind. I want the contents of infinite scroll to stretch the entire page, but I am instead seeing this:
import React, { useState } from "react";import InfiniteScroll from 'react-infinite-scroll-component';const Home = () => { const [items, setItems] = useState([0,1,2,3]); function fetchData() { return null } return (<div style= {{display:'flex', flexWrap: 'wrap', flexDirection: "row"}}><InfiniteScroll style={{ flexGrow: 1 }} dataLength={items.length} //This is important field to render the next data next={fetchData} hasMore={true} loader={<h4>Loading...</h4>} endMessage={<p style={{ textAlign: 'center' }}><b>Yay! You have seen it all</b></p> } // below props only if you need pull down functionality refreshFunction={fetchData} pullDownToRefresh pullDownToRefreshThreshold={50} pullDownToRefreshContent={<h3 style={{ textAlign: 'center' }}>↓ Pull down to refresh</h3> } releaseToRefreshContent={<h3 style={{ textAlign: 'center' }}>↑ Release to refresh</h3> }><div className="w-full h-full mt-1 sm:mt-6 flex flex-col space-y-4"> oi</div></InfiniteScroll></div> );};export default Home;