div one above the other in flexbox - html

Question

My idea is, when my Boolean variable is true, than a grey container with a opacity overlaps the orange and with a higher z-index.
I can't click on some buttons or else inside the orange container.
But I need the flexbox on the wrapper.
At the moment, my idea with the z-index failed, and it's flex in a row.
How can I fix this and put the grey above the orange (both 100% width and high of the wrapper) and still using flexbox.
Important: When its overlapped, I can't click in the orange container, looking like it is disabled.
I've got following code:
angular.module("myApp", []).controller("myController", function($scope) {
$scope.isDisabled = true;
});
.wrapper {
display: flex;
width: 100%;
height: 50px;
border: 1px solid red;
z-index: 100;
}
.overlapped {
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
z-index: 102;
}
.someContent {
width: 100%;
height: 100%;
background-color: orange;
z-index: 101;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="wrapper">
<div ng-if="isDisabled" class="overlapped"></div>
<div class="someContent">I have some random content...</div>
</div>

Answer 1

To make the container overlaying the other:
just use position:relative in the parent .wrapper and position:absolute in overlapped
To disable the orange container:
use pointer-events:none linked to your Boolean variable. (might be optional)
angular.module("myApp", []).controller("myController", function($scope) {
$scope.isDisabled = true;
$scope.isPointer = true;
});
.wrapper {
display: flex;
width: 100%;
height: 50px;
border: 1px solid red;
position: relative;
}
.overlapped {
width: 100%;
height: 100%;
background-color: grey;
opacity: 0.5;
z-index: 1;
position: absolute;
}
.someContent {
width: 100%;
height: 100%;
background-color: orange;
}
.pointer-events {
pointer-events: none
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController" class="wrapper">
<div ng-if="isDisabled" class="overlapped"></div>
<div ng-if="isPointer" class="someContent pointer-events">I have some random content...</div>
</div>