Empty space for one columns width with flexbox - html

Question

I have a parent div and two divs inside. I want to keep specific sizes (columns) for those child divs. Is this possible in flexbox? I'm strugling with this.
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
First child should have width of 1 column, second child width of 2 columns. On right side I want to have empty space in width of 1 column (so parent div should behave like it has 4 columns).

Answer 1

Here's a method using flex-basis to set flex items to specific percentage widths.
In this example, the two flex items can neither shrink nor grow. Splitting 100% width into four columns, each column needs to be 25% of the parent width. The first item is 25% and the second is 50% (two columns wide), leaving 25% space on the right.
.parent {
display: flex;
min-height: 10em;
border: 1px solid #CCC;
}
.child {
outline: 1px solid black;
background-color: lightgray;
}
.child:nth-child(1) {
flex: 0 0 25%
}
.child:nth-child(2) {
flex: 0 0 50%;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
EDIT
I notice you'd like some space between each column. One way is to add some right margin percentage to flex items and subtract that percentage from each item's flex-basis.
.parent {
display: flex;
min-height: 10em;
border: 1px solid #CCC;
}
.child {
outline: 1px solid black;
background-color: lightgray;
margin-right: 3%;
}
.child:nth-child(1) {
flex: 0 0 22%;
}
.child:nth-child(2) {
flex: 0 0 47%;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
If you'd rather that the space between columns not be a percentage, you can use calc() to calculate the appropriate flex-basis. However, note that this is not supported in IE or Edge at the time of this post.
IE & Edge are reported to not support calc inside a 'flex'. (Not tested on older versions)
This example does not work: flex: 1 1 calc(50% - 20px);
caniuse.com
.parent {
display: flex;
min-height: 10em;
border: 1px solid #CCC;
}
.child {
outline: 1px solid black;
background-color: lightgray;
margin-right: 0.5em;
}
.child:nth-child(1) {
flex: 0 0 calc(25% - 0.5em);
}
.child:nth-child(2) {
flex: 0 0 calc(50% - 0.5em);
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>

Answer 2

You can achieve this using flexbox by using a pseudo element that occupies the fourth column:
add flex: 1 to the first child and the pseudo element,
add flex: 2 to the second child.
See demo below:
.parent {
display: flex;
height: 100px;
border: 1px solid #ddd;
}
.child {
border: 1px solid cadetblue;
background: lightblue;
flex: 1;
}
.child + .child {
flex: 2;
}
.parent:after {
content: '';
flex: 1;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
And the easier solution using CSS Grid layout - establish a 4-column layout and span the second child element over two columns:
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
height: 100px;
border: 1px solid #ddd;
}
.child {
border: 1px solid cadetblue;
background: lightblue;
}
.child + .child {
grid-column: span 2;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>

Answer 3

Nobody seems to have suggested you could just set the width of the parent:
.parent {
width: 75%;
display: flex;
}
.child {
flex: 150;
height: 2rem;
border: 1px solid #000;
}
.child:first-child {
flex: 75;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
EDIT:
And to add, you want your second child to be twice as big as your first, so give your second child a flex value of something that's twice as big as your first - I used 1 and 2, but you could've used flex: 75 and flex: 150 to achieve the same effect.