ボックスを親の50％の高さに分割する

Question

アクティブなアイテムを親エレメントの高さの50％に分割したいとします。だから私が最初の2つのアイテムを開くとき、彼らは親クラスの012％に分割する必要があります.items（両方の.itemは100pxを持っています）。だから私はスクロールせずに両方を見ることができます。また、3つすべてを開くと、100pxの高さを取得する必要があります。これは親の半分です。私の問題は、2番目の項目が重なり、スクロールしなければならないということです。どうしましたか？

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.itemList = [{ 
 
    id: 1, 
 
    name: "Item 1", 
 
    isOpen: false 
 
    }, { 
 
    id: 2, 
 
    name: "Item 2", 
 
    isOpen: false 
 
    }, { 
 
    id: 3, 
 
    name: "Item 3", 
 
    isOpen: false 
 
    }]; 
 

 
    $scope.setHeight = function() { 
 
    if ($scope.itemList.length > 1) { 
 
     var typeHeaderHeight = $('.item-header').outerHeight(); 
 
     var halfHeight = Math.round($('.items').outerHeight()/2); 
 

 
     setTimeout(() => { 
 
     $('.item').css('height', typeHeaderHeight); 
 
     $('.item.active').css('height', halfHeight); 
 
     }); 
 
    } 
 
    } 
 
});

.frame { 
 
\t display: flex; 
 
\t flex-direction: column; 
 
\t height: 200px; 
 
} 
 

 
.items { 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
    flex-direction: column; 
 
    overflow: auto; 
 
    border: 1px solid black; 
 
} 
 

 
.item { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex: 0 0 auto; 
 
    margin-bottom: 5px; 
 
    background-color: rgb(150, 150, 150); 
 
    color: white; 
 
} 
 

 
.item:hover { 
 
    cursor: pointer; 
 
} 
 

 
.item-header { 
 
    position: relative; 
 
    display: flex; 
 
} 
 

 
.active { 
 
    background-color: rgb(220, 220, 220); 
 
    color: rgb(150, 150, 150); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div class="frame" ng-app="myApp" ng-controller="myController"> 
 
    <div class="items"> 
 
    <div class="item" ng-repeat="item in itemList" ng-click="item.isOpen = !item.isOpen; setHeight()" ng-class="{active: item.isOpen}"> 
 
     <div class="item-header"> 
 
     {{item.name}} 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

問題は、計算

に誤りがあるので、アイテムが実際に開かれる前に、それは常に計算して、あなたがタイムアウト外 typeHeaderHeightと halfHeight変数の値を設定していることです

ようにしよう

もう一つは..私が代わりにそれが