flex 子元素超出父容器的大小

Question

我正在尝试将酒店搜索结果提要设为固定高度，但如果结果超出提要容器的大小，也能够滚动。

应该是这样的：mockup

但目前看起来是这样的：current

如您所见，滚动条出现在整个页面上，而不是在提要容器中。

我将整个页面包装在一个 flexbox 父容器中，然后两个直接子级是 searchBar 和 page content。 页面内容目前也是一个弹性容器，其中包含酒店搜索结果和酒店建议组件作为弹性子项。我目前正在使用带有样式的组件在 React 中编写代码，但这本质上是一个 css 问题。关于如何构建我的 css 以使其看起来像我想要的任何想法？

App.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 而不是 flexbox 来进行这样的设计。 CSS-Gris 的优点是可以同时控制高度和宽度。在下面的示例中，主体被声明为 100vh 和 100vw 以填写确切的屏幕尺寸。需要 cals 来对抗填充。搜索结果和酒店建议添加了溢出规则，以便这些卡片将获得滚动条而不是正文。

最好在全屏模式下测试 sn-p。当然你可以随意改变它，sn-p 只是展示了如何使用 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