There is a wrapper containing multiple boxes generated using ng-repeat from a list. The wrapper has a fixed height of 300px. If the list contains only one box, a class is added to fill the entire space of the wrapper. However, when there are more than one box in the list, each box should have a height of 50% of the wrapper's height (150px for three boxes). While attempting to set this height using ng-class and a style property, it resulted in an issue where the third box's height was not visible due to overflow. Any suggestions on how to address this?
Angular.module("myApp", []).controller("myController", function($scope) {
$scope.myList1 = [{
id: 1,
name: "Box 1"
}];
$scope.myList2 = [{
id: 1,
name: "Box 1"
},
{
id: 2,
name: "Box 2"
}, {
id: 3,
name: "Box 3"
}
];
});body {
height: 100vh;
width: 100vw;
}
.wrapper {
display: flex;
flex-direction: column;
flex: 1 1 auto;
border: 1px solid blue;
overflow: auto;
height: 300px;
}
.box {
display: flex;
flex-direction: column;
flex: 0 0 auto;
background-color: orange;
border-bottom: 1px solid red;
}
.fillBox {
flex: 1 1 auto;
}
.fillHalfBox {
height: 50%;
}