CSS Flex-Box: результаты .map превышают контейнер div ⇐ CSS

[Anonymous]

Я не могу «подкорректировать» результаты запроса API, которые сопоставлены с помощью функции .map, чтобы они поместились внутри контейнера div. Я использую реакцию.
Вот мой 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;
}

А это код соответствующего компонента:

Код: Выделить всё

{books.map((book) => {
const isbn13 = book.volumeInfo.industryIdentifiers?.find(identifier => identifier.type === 'ISBN_13')?.identifier || 'No ISBN_13 available';
return (

{book.volumeInfo.title}
{book.volumeInfo.authors?.join(', ')}
{book.volumeInfo.publishedDate}


ISBN 13: {isbn13}
 copyToClipboard(isbn13)}>





);
})}

Вот скриншот того, как оно отображается в области просмотра:



Подробнее здесь: https://stackoverflow.com/questions/790 ... -container