How to align child components horizontally to occupy a certain percentage of the container's width?

user_4779809 0
Viewed 508

I have three different React components in the following format:

<Container className={"parent"}>
    <h2>Heading</h2>
    <Tabs className={"childOne"}/>
    <Info className={"childTwo"}/>
</Container>

Each of the above child components render other child components and native html tags like <div>s and <span>s.

This is how I want the components to render on the browser:

Component layout

I have tried achieving this using CSS flex-box. However, the child components only take up the width of their content and I am not able to proportion their widths into 66% and 33% of the container respectively (with some gap in between). This is the CSS I tried:

.parent {
  display: flex;
  flex-direction: row;
}

.childOne {
  flex-basis: 70%;
}

.childTwo {
  flex-basis: 30%;
}

I also tried display: inline-block; and float:left on each of the child components but this did not even align the children horizontally.

Could someone please show me how I can achieve this? Thanks!

flexbox reactjs rendering css html
2 Answers

The easiest way to do it is to use flexbox. Here you have an example. You can add as many columns as you want.

Code based on Bootstrap 5.

.row{
  display:flex;
  flex:1 0 100%;
  flex-wrap:wrap;
}
.row > *{
  flex-shrink:0;
  width:100%;
  max-width:100%;
}
.col-4{
  flex:0 0 auto;
  width:33.333333%;
}
.col-8{
  flex:0 0 auto;
  width:66.666667%;
}
/*DEMO*/*{box-sizing:border-box}.col-4,.col-8{padding:1.5rem;border:1px solid red}
<div class="row">
  <div class="col-8">A</div>
  <div class="col-4">B</div>
</div>

user_92805230

You're using flex-basis: 50% on both which will be equal and not as you expected it. Maybe make childOne flex-basis of 70%?

You can also make flex: 2 on childOne and flex: 1 on child two.

Here is a code example: https://codepen.io/jsmohamed/pen/XWXaMbp

user_137760890
Related