How can a child component's height be dynamically adjusted according to its parent's size?

Question

How can a child component's height be dynamically adjusted according to its parent's size?

Here is a link to the codesandbox I created: https://codesandbox.io/s/jolly-agnesi-j5bzr?file=/src/App.js

Below is a screenshot of the project:

https://i.sstatic.net/GdYVZ.png

The red background content is dynamically generated, causing the height of the grey card to be dynamic as well.

My goal is to have all components adjust their heights based on the tallest child component in the container. I've set the parent container to grow according to the tallest child and each child component has been given a height of 100%, but they still don't completely fill the container. I'm not sure where the issue lies. Ultimately, all grey cards should have equal heights.

html css reactjs

Answer 1

Answer №1

If you're looking for a JavaScript solution, consider adding a ref to your main cards container that can be used later to retrieve the container's height.

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

Next, save the container's height to a state and then apply it to 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 some CSS adjustments by changing the box-sizing, which affects the inner card's layout within the parent

".scroll-shortcuts-item"

. The cards may look thinner due to this change, so feel free to adjust the min-width accordingly.

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

Check out the CodeSandBox for implementation details: https://codesandbox.io/s/jolly-benz-kqd26?file=/src/App.js

This approach also works for multiple rows of cards. Just iterate through the cards to find the tallest one in terms of height.

Answer 2

If you're looking for a JavaScript solution, consider adding a ref to your main cards container that can be used later to retrieve the container's height.

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

Next, save the container's height to a state and then apply it to 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 some CSS adjustments by changing the box-sizing, which affects the inner card's layout within the parent

".scroll-shortcuts-item"

. The cards may look thinner due to this change, so feel free to adjust the min-width accordingly.

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

Check out the CodeSandBox for implementation details: https://codesandbox.io/s/jolly-benz-kqd26?file=/src/App.js

This approach also works for multiple rows of cards. Just iterate through the cards to find the tallest one in terms of height.

Answer 3

Answer №2

Give this a shot:

// MainApp.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 shortcutsList = [
  {
    id: 1,
    title:
      "Example Title",
    subText: "Sample Subtext",
    link: "http://example.com"
  },
  // Additional shortcut items here...
];

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

// ResourceCardComponent.js

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

const StyledCard = styled.div`
  // Styles for the card component
`;

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)

Answer 4

Give this a shot:

// MainApp.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 shortcutsList = [
  {
    id: 1,
    title:
      "Example Title",
    subText: "Sample Subtext",
    link: "http://example.com"
  },
  // Additional shortcut items here...
];

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

// ResourceCardComponent.js

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

const StyledCard = styled.div`
  // Styles for the card component
`;

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 can a child component's height be dynamically adjusted according to its parent's size?

Answer №1

Answer №2

Similar questions

Unable to access Redux store (simple Redux example)

I am attempting to use useSelector to set the initial value for useState, but I am encountering difficulties in making it work

Adjusting the color of a cell based on its value

Updating React component props

Guide to embedding an iframe generated with JavaScript into a React component

What is the best way to handle errors in the front-end when receiving responses from expressjs?

Displaying a table in Chrome/Firefox with a mouseover feature

Show/Hide sections of content that transition and rearrange the layout of the page

Make the div disappear upon clicking the back button in the browser

Unwanted gap appears in the image slider

When attempting to transmit data to the server, an error message pops up in the DevTools console of the browser. The error is displayed as "Network Error at create

Troubleshooting an Issue with CSS Sliding Doors

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

How to use getServerSideProps in Next.js

Having trouble aligning items within columns using Bootstrap 4?

Looking for a way to efficiently add multiple value inputs to a JSON object using jQuery or JavaScript?

Implementing Pagination Functionality Using Knockout.js

Exporting an HTML table to Excel while excluding any hidden <td> elements

Dimensions of images in Bootstrap carousel

What are the functioning principles of older ajax file uploading frameworks (pre-html5)?