html - Child div display table-cell fixed width not working -

i trying stretch child div full height of parent using display: table-cell on child, want child width stay within container , child ignores width property , 100% width.

i have tried adding table-layout: fixed parent, setting max-width: 100px child not seem affect child div.

i have following layout:

<div class="parent">    <div class="child">      //content here    </div>  </div> 

and following css

.parent {   display: table;   width: 100%; }  .child {   display: table-cell;   width: 100px; } 

example: fiddle

************** update **************

i able achieve desired behavior using display: flex , flex-direction: column on .parent , flex: 1 on .child, not sure if best solution because of browser compatibility.

see updated fiddle

add grand-child div

here snippet:

.parent {      display: table;      width: 100%;      background: blue;      min-height: 500px;  }  .child {      display: table-cell;      padding: 5% /* demo */  }  .grand-child {      background: white;      width: 100px;  }

<div class="parent">      <div class="child">          <div class="grand-child">blue background not visible due .child taking width 100%</div>      </div>  </div>

update (based on op comment)

thank you, child/grand-child div not full height of parent

so here explanation/solution:

explanation:

min-height doesn't apply table elements

in css 2.1, effect of min-width , max-width on tables, inline tables, table cells, table columns, , column groups undefined.

from mdn:

applies elements non-replaced inline elements, table columns, , column groups

so, can replace min-height height, because table stretch.

solution:

/* both single , multiple cells */    .parent {    display: table;    box-sizing:border-box; /*see vendor-prefixes */    width: 100%;    background: blue;    height: 500px;  }  .child {    display: table-cell;  }  .child .parent{    width: 100px;    background: white;  }      /* multiple "cells" */      /*if want have more 1 .child.parent display in same .row either set them float:left or .display:inline-block (maybe margin-left/right) - added multiple justfor demo puposes */    .parent .multiple {    float:left;    margin-right:6%;  }

<h1> single "cell" </h1>    <hr />    <div class="parent">    <div class="child">      <div class="parent">blue background not visible due .child taking width 100%</div>    </div>  </div>      <!--    how code works:    <table> // parent      <tr> -- ommited in code above --          <td> //child              <table> // child parent              </table>         </td>      </tr>  </table>    -->    <h1> multiple "cells" </h1>    <hr />    <div class="parent">    <div class="child">      <div class="parent multiple">blue background not visible due .child taking width 100%</div>      <div class="parent multiple">blue background not visible due .child taking width 100%</div>      <div class="parent multiple">blue background not visible due .child taking width 100%</div>    </div>  </div>    <!--    how code works:    <table> // parent      <tr> -- ommited in code above --          <td> //child              <table> // child parent              </table>              <table> // child parent              </table>              <table> // child parent              </table>         </td>      </tr>  </table>    -->