如何调整div元素的大小，使其小于其内容？

Question

I have a table and there is a TreeView in a cell. Here is my code:

   <style>
        #leftPanel
        {
            width:60px;
            height:'100%';
            border:1px solid red;
            background:yellow;
        }  
    <style>

        <table>
         <tr>
          <td> 
           <div id="leftPanel">
             <asp:PlaceHolder runat="server" ID="TreeView" />
             <%-- Here is a TreeView --%>
           </div>
          </td>
         </tr>
          <%-- other code --%>
        <table>

 $(function () {
         $('#leftPanel').resizable(
         {
             handles: 'e, w'
         });
     });

I can't reduce the size of my div less then the size of my TreeView. What code need I write to allow leftPanel to be less than the size of TreeView ? It is necessary if TreeView node's text too long.

Answer 1

You can set the overflow property for the div in CSS.

Set it to overflow: auto;

DEMO