I am currently utilizing React MUI V5 and I am looking to modify the flex direction of a div from row to column when a preceding div changes in height or wraps.
Below is a basic example of what I have implemented using plain HTML/CSS, but I am uncertain if there is an alternative method with flexbox 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 class="parent">
<div class="child1">
<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 class="child2">
<button>Button1</button>
<button>Button2</button>
</div>
</div>
A jsFiddle version can be found here showcasing the above setup.
In essence, if the child1 class div remains as a single line without any wrapping or height adjustment, then the flex-direction: row should be maintained for the child2 class. However, it needs to switch to flex-direction: column when the child1 class wraps its content or experiences any change in height.
I am unsure of how to implement this within my MUI component and whether MUI V5 breakpoints could be utilized?
In the jsFiddle example provided, the flex-direction should transition to column once the contents of the child1 div have wrapped.