CSS Flex-Box: .map results exceed div container

I cannot "adjust" the results from an API query which are mapped with .map function to fit inside a div container. I am using react.Here is my CSS:

.book-results-container {    max-height: 250px;     overflow-y: scroll;    margin-top: 10px;    border: 1px solid #ddd;    padding: 10px;    border-radius: 3px;}.book-results {    margin-bottom: 5px;    flex: 1 1 auto;}

And this is the code from the corresponding component:

<div className='book-results-container'>  {books.map((book) => {    const isbn13 = book.volumeInfo.industryIdentifiers?.find(identifier => identifier.type === 'ISBN_13')?.identifier || 'No ISBN_13 available';    return (<div key={book.id} className='book-results'><h3>{book.volumeInfo.title}</h3><p>{book.volumeInfo.authors?.join(', ')}</p><p>{book.volumeInfo.publishedDate}</p><div className='book-isbn-container'><p>ISBN 13: {isbn13}</p><button className="book-button-copy" onClick={() => copyToClipboard(isbn13)}><box-icon color="white" name="copy"></box-icon></button></div><hr></hr>    </div>    );  })}</div>

Here is a screenshot how it is rendered onto the viewport:Image may be NSFW.
Clik here to view.