I am currently working on a React web application that has minimal styling. I have divided the content into 3 columns, with the leftWrap being col-3, rightWrap being col-4, and the remaining width is for centerWrap. I want to apply flexbox to these columns without knowing their exact class names. How can I achieve this?
<div className={styles.Home__wrapper}>
<div className={styles.Home__leftWrap}> .... </div>
<div className={styles.Home__centerWrap}> .... </div>
<div className={styles.Home__rightWrap}> .... </div>
</div>
.Home {
&__wrapper {
display : flex;
flex-wrap: nowrap;
width : 100%;
box-sizing: border-box;
}
&__leftWrap {
display : flex;
}
&__rightWrap {
display : flex;
}
&__centerWrap {
display : flex;
}
}
Is it possible to set the width for each column className based on the classes mentioned above using the calc() method?