移动 Chrome 浏览器不显示我的 div 或结果数据

Question

I have the following piece of React code on my website that shows the search results div only if the search results exist. The backend limits search results to only 20 items at a time, and each item is a dictionary with only three key-value pairs.

This works perfectly on all desktop browsers and also Firefox on Android. But on Android Chrome the search results never show . I've tried changing the display to always block, letting the height and width be undefined, and tons of different formatting changes.

Is there something related to div height or data displayed for mobile Chrome? Has anyone encountered this?

<div
  style={{
    height: 150,
    width: "100%",
    overflowY: "scroll",
    display: this.props.hasSearchResults ? "" : "None"
  }}
>
  {/* switch to a div */}
  {/* <List> */}
  {this.props.search_results.map((result, idx) => (
    <div>
      <IconButton
        size="small"
        edge="end"
        onClick={event => {
          this.handleMenuAdd(event, result);
        }}
        style={{height: "100%"}}
      >
        <AddIcon
          style={{margin: "auto"}}
          fontSize="small"
        />
      </IconButton>
      <Typography
        style={{verticalAlign: "bottom"}}
        noWrap={true}
        // display="block"
        variant="caption"
      >
        {result.name}
      </Typography>
      <Typography
        variant="caption"
        style={{marginLeft: 10}}
        noWrap={true}
      >
        {result.item_type}
      </Typography>
    </div>
  ))}
</div>

Answer 1

Thank you all for your attention and input. The problem was serverside. It simply wasn't lowercasing the search query. In Chrome the input was being automatically capitalized and in Firefox it wasn't. Feeling silly but will leave this here in case someone else needs to see it.