如何在flexbox上自动溢出

Question

我正在使用Jquery进行自定义控件。它从data-list属性中获取项目列表，并输出相反的列表框。我希望通过控制显示多少列表项来控制高度，并使其余部分可滚动。高度正常，但我无法通过设置overflow-y：auto。

来显示滚动条

Codepen

$.fn.olbox = function(options) {

 this.css("display","flex"); 
 this.css("align-items","flex-start"); // required to limit width of enclosed box

var itemslist = this.attr("data-list").split(",");
var header = "<div class='olb-header' style='padding: 0 3px 3px 5px; font-size: 125%; font-weight: 900;'>HEADER</div>";
  var footer = "<div class='olb-footer' style='text-align: center; padding: 5px 3px 3px 0; font-size: 50%; text-decoration: italics;'>FOOTER</div>";
var titlesbox = "<div class='titles' style='display: flex; flex-direction: row; align-items: center;'>" + "<div class='yes-title' style='border-bottom: 1px solid black; padding: 0 5px;'>YES</div><div class='items-title' style='font-weight: 900; border-bottom: 1px solid black; ; padding: 0 5px;'>ITEMS</div><div class='no-title' style='border-bottom: 1px solid black'>NO</div>" + "</div>";
var yes = "<div class='yes-col'><div class='yes-checks'>";
  var items = "<div class='items-col'><div class='items2'>";
  var no = "<div class='no-col'><div class='no-checks'>";
  for (i = 0; i < itemslist.length; ++i) {
    yes = yes + "<div><input class='yes' type='checkbox' data-text='" + itemslist[i] + "' value=true style='margin: 0'></div>";
    items = items + "<div id='items-text'>" + itemslist[i] + "</div>"
  no = no + "<div><input class='no' type='checkbox' data-text='" + itemslist[i] + "' value=false style='margin:0;'></div>";
  }
  yes += "</div></div>";
  no += "</div></div>";
  items += "</div></div>";

  var cont =  "<div class='olb-container' style='display: flex; flex-direction: column; text-align:center; height: 100%; padding: 0 3px 0 3px;'>" + header + titlesbox + "<div class='itemsbox' style='display: flex; justify-content: space-around; margin: 2.5px 0 2.5px 0;'>" + yes + items + no +  "</div>" + footer ;
  this.append(cont);

// limit lines to 3  
  $('.itemsbox').css("line-height","1em");
  $('.itemsbox').css("height","3em");
  $('.itemsbox').css("overflow-y","auto"); // why not scrollbar? remove it and overflow seen

  // Apply Defaults/Options
  $('.olb-container').css({
    'border' : '2px solid black',
    'border-radius': '5px'
  })

  return this.css({
  });
};