c# - max-width CSS attribute not working on a DIV -

i'm wanting restrict displayed size of image selected user, not having luck css, doing wrong?

the user can select image, , being displayed, showing full size of image in cases extends far beyond viewable area of web page.

<div id="wrapper">     <input id="fileupload" type="file" />     <br />     <div id="image-holder" style="width:100%;max-width:50px;height:auto;border:4px solid"></div> </div>    @styles.render("~/content/css/") @scripts.render("~/bundles/jquery")   <script type='text/javascript'>      $(document).ready(function () {         $("#fileupload").on('change', function () {              if (typeof (filereader) != "undefined") {                  var image_holder = $("#image-holder");                 image_holder.empty();                  var reader = new filereader();                 reader.onload = function (e) {                     $("<img />", {                         "src": e.target.result,                         "class": "thumb-image"                     }).appendto(image_holder);                  }                 image_holder.show();                 reader.readasdataurl($(this)[0].files[0]);             } else {                 alert("this browser not support filereader.");             }         });        });  </script> 

add max-width: 100% img if want constrained width of parent.

<div style="max-width: 50px">    <img style="max-width: 100%" src="http://kenwheeler.github.io/slick/img/fonz1.png">  </div>