如何根據其內容使div最小寬度

Question

我有一個div，里面有桌子。 div的寬度已滿，但是每當我調整屏幕大小時，div就會減小其大小，然后其內容就會與div重疊。

現在，我希望基於內容（表）的div的最小寬度。 我的主要div是class =“ search”。 這是我的代碼的鏈接：

 .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

將最小寬度應用於父div並管理正文中的溢出。 每當您減小widnow的寬度，然后再搜索div的寬度時，主體中就會出現滾動。

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