html - CSS Overlow doesn't appear to be honored -

i have read number of questions on here pertaining overflow property. seems straightforward enough, basic expectations not getting met.

consider code below. i've got tall div specified this:

<div class="blue fixed-height1000">big</div>

it appears inside div should clipping it:

<div class="cell yellow overflow-hidden fixed-height100">

but tall div not clipping. why?

my understanding that, since parent 100 pixels tall no overflow allowed, child, 100 pixels tall, not appear onscreen 1000 pixels tall.

but not happening. entire 1000 pixels visible, causing page scroll.

here guesses why happening:

• the parent overflow property display:table-cell , overflow works on display:block?
• or, parent flexibly height because part of table fits page, , overflow works on fixed sizes? (even though experimentation tried force height on table cell anyway see if force overflow work)

.fixed-width100 {width:100px;}  .fixed-height75 {height: 75px;}  .fixed-height1000 {height: 1000px;}  .height50percent {height: 50%;}  .height100percent {height:100%;}  .width100percent {width: 100%;}    .table {display: table;}  .row {display: table-row;}  .cell {display: table-cell;}    .overflow-hidden {overflow:hidden;}  .overflow-auto {overflow:auto;}  .overflow-scroll {overflow: scroll;}      .yellow {background-color: yellow;}  .orange {background-color: orange;}  .red {background-color: red;}  .green {background-color: green;}  .blue {background-color: blue;}

<div class="height100percent">  <!--wraps entire page single table fits page-->    <div class="width100percent height100percent table">        <div class="row fixed-height75 green"> top header </div>        <div class="row">        <div class="cell fixed-width100 orange">fixed</div>        <div class="cell yellow overflow-hidden fixed-height100">clipped?          <div class="blue fixed-height1000">big</div>          </div>        <div class="cell red">          <div class="height50percent green">            height 50%          </div>          <div class="height50percent orange">            height 50%          </div>        </div>        <div class="cell">flex. </div>        <div class="cell fixed-width100">fixed</div>      </div>        <div class="row fixed-height75 green">bottom footer</div>    </div>               </div>

i problem display:table-cell. w3schools: "let element behave td element." td element adjust content , can't set height on , not hide overflow :) far know