min-height property with nested react components?

Question

I have a react component like so:

export default class DocumentSearch extends React.Component {
  constructor() {
    super();
    this.state = {
      numberOfResults: 270,
      timeTakenForResults: 1
    };
  };

  render() {
    return (
      <div>
        <SearchBar top="true" />
        <Tabs page="document" />
        <p className="telemetry">
          {`${this.state.numberOfResults} results (${this.state.timeTakenForResults} seconds)`}
        </p>
        <div className="document-results-background">
          <div className="document-results-container" >
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            <Result url="https://example.com" title="Example Domain" description="undefined" />
            {/* <Pagination page="1" numberOfResults={this.state.numberOfResults} /> */}
          </div>
        </div>
      </div>
    );
  };
};

Where "Result" is a div with some content, and has height and padding.

And the relevant css file for this component is as follows:

.document-results-background {
  position: absolute;
  width: 60vw;
  top: 0;
  left: 20vw;
  min-height: 100vh;
  background-color: lightgrey;
}

.document-results-container {
  position: absolute;
  top: 7.75vw;
  width: 100%;
  height: calc(100% - 7.75vw);
}

For some reason, when I place a lot of Result components, the height of "document-results-background" stays the same. Why might that be, even when the content is obviously greater that 100vh? I tried setting the height of .document-results-background to auto, but that just set its height to 0. So the browser thinks my content's height is 0, is this the reason for my issues, if so how do I fix it?

@gmoniava So you're saying I should use Javascript judging by the theme of the responses in the url. — Crupeng, Jan 30 '21 at 13:17
Or you can reask question with newer info. Or wait for others answers. I am no CSS expert. Will put link for reference here:https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height — Giorgi Moniava, Jan 30 '21 at 13:20

Jalal · Answer 1 · 2021-01-30T13:27:21.103

As mentioned in the comments, absolute position will ruin the flow. It's usually a better idea to use flex or grid for positioning, yet in your case, if the goal is to give a simple spacing to the left and right sides you could remove positions and just give the parent element a margin: 0 auto;, and use margin-top instead of top to add margin to the top. Like This.

.document-results-background {
  width: 60vw;
  background-color: lightgrey;
  margin: 0 auto;
}

.document-results-container {
  margin-top: 7.75vw;
  width: 100%;
}

working demo on codesandbox

score 0 · Accepted Answer · answered Jan 30 '21 at 20:16

I know it is not best practice, but to compute the height based on inner elements and margins, add this to a componentDidMount function:

componentDidMount() {
    function handleResize() {
      let calculatedHeight = 0;
      const properHeight = window.innerHeight;
      const width = window.innerWidth;
      const isPhone = (properHeight / width) >= 1
      const results = document.querySelectorAll(".result-container");
      let offsetHeightPercent;
      let marginHeightPercent;

      if (isPhone) {
        offsetHeightPercent = 0.11625;
        marginHeightPercent = 0.0075;
      } else {
        offsetHeightPercent = 0.0775;
        marginHeightPercent = 0.005;
      };

      calculatedHeight = offsetHeightPercent * width;

      for (let i = 0; i < results.length; i++) {
        calculatedHeight += results[i].offsetHeight;
        calculatedHeight += marginHeightPercent * width;
      };

      calculatedHeight = `${Math.max(calculatedHeight, properHeight)}px`;

      document.querySelector(".document-results-background").style.height = calculatedHeight;
    };

    handleResize();

    window.onresize = handleResize;
  };

min-height property with nested react components?

2 Answers2