如何根据其内容使div最小宽度

Question

I have a div with table inside. The div is full in width, but whenever I resized the screen, the div will reduce its size then its content will overlapped the div.

Now, I want the minimum width of the div based on the contents(table). My main div is class="search". Here is the link for my codes:

 .search { border: 2px solid #FDBF3B; background-color: #FFEBC1; padding: 10px; margin: 5px 0; } .search table { border: none; } .search .header { margin-bottom: 5px; border-bottom: 1px solid #FDBF3B; padding-bottom: 2px; color: #000F1F; font-weight: bold; overflow: hidden; } .search .buttons { margin-top: 5px; border-top: 1px solid #FDBF3B; padding-top: 8px; white-space: nowrap; } .inner { padding: 7px; min-height: 480px; z-index: 1; overflow: auto; } 

 <DIV class=inner> <DIV class=search sizset="false" sizcache017720493147691946="40 33 1"> <DIV class=header>Search Options </DIV> <TABLE sizset="false" sizcache017720493147691946="40 33 1"> <TBODY sizset="false" sizcache017720493147691946="40 33 1"> <TR> <TD></TD> <TD class=LABEL> <SPAN id=LBL_NAME>Name:</SPAN> </TD> <TD> <INPUT name=NAME style="BACKGROUND-COLOR: #ffffff" type=text size=15 maxLength=10 data-dpmaxz-eid="4"> </TD> </TR> <TR> <TD></TD> <TD class=LABEL> <SPAN id=LBL_ADDRESS>Address:</SPAN> </TD> <TD> <INPUT name=ADDRESS style="BACKGROUND-COLOR: #ffffff" type=text size=40 maxLength=50 data-dpmaxz-eid="5"> </TD> </TR> </TBODY> </TABLE> <DIV class=buttons> <INPUT name=SEARCH class=BUTTON type=button value=Search> <INPUT name=SEARCH class=BUTTON type=button value=Clear> <INPUT name=CREATE class=BUTTON type=button value=Create> </DIV> </DIV> </DIV> 

Answer 1

apply min-width to parent div and manage overflow in body. Whenever you reduce widnow width lesser then search div's width, there will be a scroll in body.

    .body{
       overflow: scroll;
    }
    .search {
       min-width:380px;
    }