CSS Flex basis grandchild - html

Question

I'm having a hard time trying to get this to work.
div {
min-height: 100px;
}
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.sub-container {
width: 50%;
display: flex;
}
.child, .grand-child {
flex-basis: 50%;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div class="desired-result container yellow">
<div class="child red">
1
</div>
<div class="child red">
2
</div>
</div>
<div class="issue container yellow">
<div class="sub-container green">
<div class="grand-child red">
3
</div>
</div>
<div class="sub-container green">
<div class="grand-child red">
4
</div>
</div>
</div>
https://jsfiddle.net/hugojg/dvasufot/21/
I want to make the elements width respect flex-basis while being a grand-child from my container (display: flex).
How can I change the code to get 3 and 4 to be like 1 and 2?
Just for reference, I'm having this problem because of bootstrap 4.
I have an element between .row and the .col-sm-6(*) element which is the exact same scenario described above.
EDIT:
<form>
<div class="row">
<div class="wrapper">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
</div>
<div class="wrapper">
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
</div>
</form>
That would be a realistic scenario.
Taken from the Bootstrap 4 docs and added a wrapper element around the inputs.
Everything I want is that this wrapper do not change the elements positioning.

Answer 1

I am not sure if I get this, but you want 3 & 4 be exactly like 1 & 2? If so, here you are:
div {
min-height: 100px;
}
.container {
width: 100%;
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.sub-container {
width: 50%;
display: flex;
}
.child, .grand-child {
flex: 1;
background-color: red;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
<div class="desired-result container yellow">
<div class="child red">
1
</div>
<div class="child red">
2
</div>
</div>
<div class="issue container yellow">
<div class="sub-container green">
<div class="grand-child red">
3
</div>
</div>
<div class="sub-container green">
<div class="grand-child red">
4
</div>
</div>
</div>
You have to change flex-basis parameter, 50% for child and 100% for grandchild, as they are subs of them.

Answer 2

Everything I want is that this wrapper do not change the elements
positioning.
When you add a .wrapper around the col-* elements, you break Bootstraps structure, where row/col-* has a parent/child relation ship, which btw also Flexbox has.
That means, you can't tell a flex parent's grand child to pick up from its width.
If you instead add the .wrapper around your label/input, the layout will be the same as w/o the .wrapper
Stack snippet
.wrapper {
background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="row">
<div class="form-group col-md-6">
<div class="wrapper">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
</div>
<div class="form-group col-md-6">
<div class="wrapper">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
</div>
</form>
If you want to add your .wrapper around the col-* elements, and keep Bootstrap's structure, you need to add/update its classes to something like below sample.
Note, when double up those classes, also their extra padding is added, and if that is unwanted, they need to reset.
.wrapper {
background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<form>
<div class="row">
<div class="wrapper row col-md-6">
<div class="form-group col-md-12">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
</div>
<div class="wrapper row col-md-6">
<div class="form-group col-md-12">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
</div>
</form>