如何根据其内容制作 div 最小宽度答案

【问题标题】：How to make a div minimum width based on its content如何根据其内容制作 div 最小宽度
【发布时间】：2018-06-08 14:52:57
【问题描述】：

我有一个里面有表格的 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>

【问题讨论】：

@Teemu 关于链接 jsfiddle...
@Teemu 我更新了我的问题
喜欢this?
@Teemu 是的，就像那个，
jsfiddle.net/dg87nmjy/1

标签： javascript jquery html css

【解决方案1】：

将最小宽度应用于父 div 并管理正文中的溢出。每当您将 widnow 宽度减小到小于搜索 div 的宽度时，都会在正文中滚动。

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

【讨论】：