彈性子容器超過父容器的大小

Question

我試圖使酒店搜索結果提要具有固定高度，但如果結果超過提要容器的大小時也能夠滾動。

它應該是這樣的：模型

但目前它看起來像這樣： current

如您所見，滾動條出現在整個頁面上，而不是出現在提要容器中。

我將整個頁面包裹在一個 flexbox 父容器中，然后兩個直接子元素是searchBar和page content 。 頁面內容目前也是一個flex容器，包含酒店搜索結果和酒店建議組件作為flex children。 我目前正在使用 Styled Components 在 React 中編寫代碼，但這本質上是一個 css 問題。 關於如何構建我的 css 以使其看起來像我想要的方式的任何想法？

應用程序.js：

 //entire screen const Wrapper = styled.div` display: flex; flex-direction: column; `; export default class App extends React.Component { constructor(props) { super(props); this.state = { searchResults: [], }; this.displaySearchFeed = this.displaySearchFeed.bind(this); } displaySearchFeed(data) { console.log("state set"); this.setState({ searchResults: data, }); } render() { return ( <Wrapper> <SearchBar displaySearchFeed={this.displaySearchFeed} /> <HotelPageContent searchResults={this.state.searchResults} /> </Wrapper> ); } }

HotelPageContent.js

 const ResultsContainer = styled.div` display: flex; `; export default function HotelPageContent(props) { console.log("rendered"); console.log(props.searchResults); return ( <ResultsContainer> <HotelSearchResults searchResults={props.searchResults} /> <HotelSuggestions /> </ResultsContainer> ); }

HotelSearchResultsFeed.js

 const Container = styled.div` height: 100%; flex: 3; border-color: red; border-width: 3px; border-style: solid; overflow-y: scroll; `; // display: grid; // position: fixed; export default function SearchResults(props) { return ( <Container> <div>Hotel Search Results</div> {props.searchResults.length > 0? props.searchResults.map((data, index) => { return <HotelCard key={index} HotelData={data} />; }): null} </Container> ); }

HotelSuggestions.js

 const Container = styled.div` height: 100%; display: grid; flex: 1; border-color: red; border-width: 1px; border-style: solid; `; export default function HotelSuggestions(props) { return ( <Container> <div>Hotel Suggestions</div> </Container> ); }

HotelCard.js

 const Container = styled.div` height: 10em; display: flex; flex-direction: row; border-color: black; border-width: 1px; border-style: solid; `; const CenterSection = styled.div` background-color: #80cbc4; border: 1px solid #fff; text-align: center; flex: 2; `; const HotelImageWrapper = styled.div` flex: 1; `; const HotelImage = styled.img` height: 100%; width: 100%; object-fit: contain; border-color: black; border-width: 1px; border-style: solid; `; export default function HotelCard({ HotelData }) { return ( <Container> {/* <HotelImage src={imgSrc} /> */} <CenterSection>{HotelData["name"]}</CenterSection> <div>{HotelData["rating"]}</div> </Container> ); }

Answer 1

對於這樣的設計，我建議使用 CSS-Grid over flexbox。 CSS-Gris 的優點是可以同時控制高度和寬度。 在下面的示例中，主體被聲明為 100vh 和 100vw 以填充確切的屏幕尺寸。 需要 cals 來對抗填充。 搜索結果和酒店建議添加了溢出規則，以便這些卡片將獲得滾動條而不是正文。

全屏測試代碼片段效果最好。 當然你可以根據需要更改它，該片段只是展示了一個示例如何使用 CSS-Grid 來完成它

 body { height: calc(100vh - 40px); width: calc(100vw - 40px); display: grid; grid-template-columns: auto min-content; grid-template-rows: min-content auto; grid-gap: 20px; padding: 20px; margin: 0px; } p { margin: 0; } #search-bar, #search-result, #hotel-suggestion { border: 1px solid black; padding: 20px; } #search-result, #hotel-suggestion { overflow-y: auto; } #search-bar { grid-column: span 2; } #hotel-suggestion { width: 25vw; } #search-result div, #hotel-suggestion div { border: 1px solid black; padding: 10px; margin-top: 5px; } #search-result div:last-child, #hotel-suggestion div:last-child { margin-bottom: 10px; }

 <div id="search-bar"> Insert searchbar here </div> <div id="search-result"> <p>hotel search results</p> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> <div>dummy result</div> </div> <div id="hotel-suggestion"> <p>hotel suggestion</p> <div>dummy suggestion</div> <div>dummy suggestion</div> <div>dummy suggestion</div> </div>

Answer 2

檢查這個。（SCSS）

main { //ResultContainer
    display: flex;
    width: 100%;
    height: calc(100vh - 80px);
    .list { //SearchResultFeed
        flex-grow: 1;
        padding: 0 10px 10px 10px;
        background-color: #82e9de;
        overflow-y: auto;
    }
    .curation { //Suggestions
        flex-basis: 150px;
        background-color: #4db6ac;
    }
}

https://codepen.io/chamuchamu/pen/dypMLze