How to adjust child component's height dynamically based on parent?

Question

I've created a codesandbox at https://codesandbox.io/s/jolly-agnesi-j5bzr?file=/src/App.js

And below is the screenshot of it

The content of the red color background is dynamic, and hence the height for grey card will be dynamic.

What I wish to achieve is that depending on the height of the tallest child component, other components will follow as well.

I've made the parent container, which indicates by blue, to grow based on tallest child, and for every child, I've gave a height of 100% but they still dont fit the container entirely, i'm not sure which part has gone wrong. Ultimately, all grey cards should have similar height

95faf8e76605e973 · Accepted Answer · 2020-07-30T05:25:48.823

This is more of a JavaScript solution, but you can have a ref on your main cards container that will basically be used later on to get the container height.

<div className="mobile-wrapper" ref={ref => (this.container = ref)}>

After that, store the height of the container onto a state & you'll be able to pass it onto the style attribute of your card.

const [containerHeight, setContainerHeight] = useState();
    
useEffect(() => {
    setContainerHeight(this.container.clientHeight);
}, []);

Card container:

<div
    key={id}
    className="scroll-shortcuts-item"
    style={{ height: containerHeight }}
>

I've made 2 line changes in the CSS, mainly the box-sizing, so that the inner card can adjust properly to the ".scroll-shortuts-item" which seems like the card parent. The cards appear thinner because of this new property. You can probably assign a new min-width as needed

height: 100%;
box-sizing: border-box;

CodeSandBox: https://codesandbox.io/s/jolly-benz-kqd26?file=/src/App.js

The same logic can be applied if there are multiple rows of cards. But in that case, you would need to iterate through the cards and look for the highest value in terms of height.

score 0 · Answer 2 · answered Jul 30 '20 at 03:48

Try this:

// APP.js

import React from "react";
import "./styles.css";
import styled from "styled-components";
import ResourceCard from "./ResourceCard";

const StyledShortcutContainer = styled.div`
  .mobile-wrapper {
    margin: 50px 0;
    width: 100%;
    display: flex;
    background-color: blue;
  }

  .scroll-shortcuts-item {
    background-color: yellow;
    flex: 1;
    max-width: 200px;
    margin: 0 10px;
    white-space: pre-line;
  }
`;
const shortcuts = [
  {
    id: 1,
    title:
      "jhahsgdajshdgashdgajshjdgahsdlajhsdljkahsdlhaljksdjhaljshdjlahsdljkahsljkdhalkshdljkahsdjahsjdlhaljksdhaljkhsdlkjahsljdkhalkjsdhajlkshdljkahsdjlkahsjldkhlkahsdlkjahsdljkhasldhajklshdklahdjkhalkjsdhlajhsdlkjahsdljkhaslkdhalkshdkljashdljkashdlahsalhsdlkajhsdjahsdjlahsjldhajhdgsahjsgdagsdhjagshjdgashjdgjahgsdhjagsajsghdjhagsdjhgashjdg",
    subText: "akhsjdkjahsjkdhaksd",
    link: "http://google.com"
  },
  {
    id: 2,
    title: "adauiysdouaysdouas",
    subText: "asldhjalkjshdljasd",
    link: "http://google.com"
  },
  {
    id: 3,
    title: "aksdhgkagsdhagsdhjkgasjd",
    subText: "ahskhjdgakjhsgdkasjhd",
    link: "http://google.com"
  },
  {
    id: 4,
    title: "asjkdhgaksgdhkjagsd",
    subText: "asdasd",
    link: "http://google.com"
  },
  {
    id: 5,
    title: "asdasd",
    subText: "asdasd",
    link: "http://google.com"
  },
  {
    id: 5,
    title: "asdasdasd",
    subText: "asdasdas",
    link: "http://google.com"
  },
  {
    id: 5,
    title: "asdasdasdasd",
    subText: "asdasdasda",
    link: "http://google.com"
  }
];

export default function App() {
  return (
    <StyledShortcutContainer>
      <div className="mobile-wrapper">
        {shortcuts.map(
          ({
            id,
            title,
            subText,
            link,
            color: shortcutColor,
            icon,
            desktopIcon,
            url
          }) => (
            <div key={id} className="scroll-shortcuts-item">
              <ResourceCard
                handleClick={() => {}}
                mainText={title}
                subText={subText}
                color="blue"
                isDesktop={false}
                link={link}
                handleLinkClick={() => {}}
              />
            </div>
          )
        )}
      </div>
    </StyledShortcutContainer>
  );
}

// ResourceCard.js

import React from "react";
import styled from "styled-components";

// height: ${(props) => (props.isDesktop ? '335px' : '254px')};
const StyledCard = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  background-color: grey;
  box-sizing: border-box;
  padding: 22px;
  border-radius: 15px;
  height: 100%;

  .main-text {
    background-color: red;
    word-wrap: break-word;
    text-align: left;
  }

  .sub-container {
    background-color: green;
    word-wrap: break-word;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .arrow-wrapper {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .icon-wrapper {
    margin-top: 20px;
  }
`;

const ResourceCard = ({
  mainText,
  subText,
  color,
  isDesktop,
  link,
  handleLinkClick
}) => {
  return (
      <a
        href={link}
        rel="noopener noreferrer"
        target="_blank"
        style={{ color: "black", textDecoration: "none", width: "100%" }}
      >
        <StyledCard
          onClick={handleLinkClick}
          color={color}
          isDesktop={isDesktop}
        >
          <div className="main-text">{mainText}</div>
          {subText && <div className="sub-container">{subText}</div>}
        </StyledCard>
      </a>
  );
};

export default ResourceCard;

(edit: removed extra div)

How to adjust child component's height dynamically based on parent?

2 Answers2