Change flex direction to column when height of another div changes or performs a wrap of it's c-CodePudding

I'm actually using React MUI V5 and basically need to change a div's flex direction from row to column when a previous div changes height or wraps.

Here is a simple example of what I currently have in plain HTML/CSS but unsure if there is another means with flex box to achieve this:

      .parent{
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
      }
      .child1{
        display: flex;
        max-width: 80%;
        padding: 10px;
      }
      .child2{
        display: flex;
        max-width: 80%;
        height: 30px;
        flex-direction: row;
      }


    <div >
      <div >
<p>
      so much data here. so much data here so much data here so much data hereso much data here v so much data here v so much data here vso
      so much data here. so much data here so much data here so much data hereso much data here v so much data here v so much data here vso
      so much data here. so much data here so much data here so much data hereso much data here v so much data here v so much data here vso
      so much data here. so much data here so much data here so much data hereso much data here v so much data here v so much data here vso
   </p>
    
      </div>
      <div >
        <button>Button1</button>
        <button>Button2</button>
      </div>
    </div>

I have created a jsFiddle here of the above.

Basically, when the div of the class child1 is a single line (no wrapping or height change) then div class child2 remains as flex-direction: row otherwise this needs to change to flex-direction: column when child1 class wraps or changes height.

Unsure how to achieve this within my MUI component and unsure if I can use MUI V5 breakpoints?

With the jsFiddle example, the flex-direction would need to change to column since child1 div has wrapped it's contents.

CodePudding user response：

There is no way that you can achieve this with CSS or MUI V5

You need to use media query or javascript for this

with Javascript, when items wrapped then it's element o̶f̶f̶s̶e̶t̶ offsetheight become greater than 0̶ baseheight and then change flex direction.

function isWrraped(id) {
    let el = document.getElementById(id);
    // 178 is base height
    return (el.offsetHeight > 178);
}

window.onresize = function (event) {
   isWrraped("child1");
}

CodePudding user response：

I don't see any trace of React or MUI in your code example.
You need to have a state for current height of the first child.
Using a ref of first child, we will update the height with each render inside useLayourEffect in order to have the latest div height.
And I also used MUI sx props to apply styles.

import { Box } from "@mui/material";
import React, { useLayoutEffect, useRef, useState } from "react";

export default function test() {
  const [height, setHeight] = useState(0);
  const ref = useRef(null);

  useLayoutEffect(() => {
    setHeight(ref.current.clientHeight);
  });

  return (
    <Box sx={{ display: "flex", flexDirection: "row", flexWrap: "wrap" }}>
      <Box
        sx={{
          display: "flex",
          maxWidth: "80%",
          padding: "10px",
        }}
        ref={ref}
      >
        <p>
          so much data here. so much data here so much data here so much data
          hereso much data here v so much data here v so much data here vso so
          {height}
        </p>
      </Box>
      <Box
        sx={{
          display: "flex",
          maxWidth: "80%",
          flexDirection: height < 45 ? "row" : "column",
        }}
      >
        <button>Button1</button>
        <button>Button2</button>
      </Box>
    </Box>
  );
}