CSS：具有固定父级的可滚动子<div>

Question

我需要使用固定的父div来滚动子div。而且我也不想设置父或子div的高度。我试过为子div设置溢出滚动但它不起作用。有什么办法吗？

.parent {
  float: right;
  width: 20%;
  background: green;
  overflow: hidden;
}

.child1 {
  min-height: 20%;
  overflow: scroll;
}

.child2 {
  min-height: 20%;
  overflow: scroll;
}

<div class="parent">
  <h1>Child 1</h1>
  <div class="child1">
    <ul>
      <li>Colors HOME</li>
      <li>Color Names</li>
      <li>Color Values</li>
      <li>Color Groups</li>
      <li>Color Shades</li>
      <li>Color Picker</li>
      <li>Color Mixer</li>
      <li>Color Converter</li>
      <li>Color RGB</li>
      <li>Color HEX</li>
      <li>Color HSL</li>
      <li>Color HWB</li>
      <li>Color CMYK</li>
      <li>Color NCol</li>
      <li>Colors HOME</li>
      <li>Color Names</li>
      <li>Color Values</li>
      <li>Color Groups</li>
      <li>Color Shades</li>
      <li>Color Picker</li>
      <li>Color Mixer</li>
      <li>Color Converter</li>
      <li>Color RGB</li>
      <li>Color HEX</li>
      <li>Color HSL</li>
      <li>Color HWB</li>
      <li>Color CMYK</li>
      <li>Color NCol</li>
    </ul>
  </div>
  <h1>child2</h1>
  <div class="child2">
    <ul>
      <li>Colors USA</li>
      <li>Colors UK</li>
      <li>Colors Australia</li>
      <li>Colors RAL</li>
      <li>Colors NBS</li>
      <li>Colors NCS</li>
      <li>Colors Crayola</li>
      <li>Colors Resene</li>
      <li>Colors XKCD</li>
      <li>Colors Brands</li>
      <li>Colors Trends</li>
    </ul>
  </div>
</div>

这里的JSFiddle演示：link