CSS Flex-Box：.map 结果超出 div 容器

Question

我无法“调整”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;
}

这是相应组件的代码：

<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>

这是如何将其渲染到视口上的屏幕截图：

Answer 1

滚动要求父容器具有给定的高度值，无论是硬编码还是诸如 height: 100% 之类的值，它都会向上传播，直到到达具有固定值的父容器

对于您的情况，您应该指定父容器的高度