如何防止div内容溢出

Question

我有一个HTML，当窗口缩小时，子div的内容会被截止。即使最外面的div是溢出：auto，还有一个滚动条.. 我注意到overflow：hidden被设置在多个子div中。问题是内部html是从某些API生成的，重置所有这些溢出属性是不切实际的。

我的问题是：

1. 这些子div的高度/宽度未设置，为什么溢出属性仍适用？
2. 还有另一种防止儿童div截止的方法吗？就像确保父div有足够的高度一样？

以下是我的html的简化版本：

＆＃13;
＆＃13;
<div id="main" style="width: 100%; height: 100%; overflow: auto; -ms-zoom: 1;" abp="1">
  <div style="box-sizing:border-box">
    <div style="overflow:hidden;text-align:left">
      <div id="SecListA" style="width: 100%; height: 100%; overflow: hidden; position: relative;">
        <div>
          <span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section A</span>
        </div>
      </div>
    </div>
  </div>
  <div style="box-sizing:border-box">
    <div style="overflow:hidden;text-align:left">
      <div id="SecListB" style="width: 100%; height: 100%; overflow: hidden; position: relative;">
        <div>
          <span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section B</span>
        </div>
        <table class="skTbl" id="MRLTable-CVIntList280">
          <thead abp="416">
            <tr class="visHid colHdr" abp="417">
              <th class="rIndent" abp="418"></th>
              <th class="hlImp" style="width: 96%;" abp="419"></th>
              <th style="width: 1%;"></th>
              <th style="width: 1%;"></th>
              <th style="width: 1%;"></th>
              <th style="width: 1%;"></th>
            </tr>
          </thead>
          <tbody abp="424">
            <tr style="display: none;" abp="425">
              <td abp="426"></td>
            </tr>
            <tr>
              <td abp="428"></td>
              <td abp="429">
                <div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle A
              </td>
              <td abp="433">
                <span abp="434"></span>
              </td>
              <td abp="435"><span abp="436"></span></td>
              <td abp="437"><span class="MRLRecFldHover" abp="438"></span></td>
              <td abp="439"><span class="MRLRecFldHover" abp="440"></span></td>
            </tr>
            <tr title="Edit this item">
              <td abp="442"></td>
              <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span>
      </td>
      <td abp="448"><span></span></td>
      <td abp="450"><span></span></td>
      <td abp="452"><span></span></td>
      <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span>
        </span>
        </span>
      </td>
      </tr>
      <tr>
        <td></td>
        <td colspan="5">
          <table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462">
            <tbody abp="463">
              <tr class="noLn" abp="464">
                <td class="skForceFitCell" abp="465">
                  <span abp="466">    
    														<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">    
    															<tbody abp="468">    
    																<tr abp="469">    
    																	<td style="padding-left: 40px;" abp="470"></td>    
    																	<td style="width: 100%; text-align: left;" abp="471">    
    																		<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">    
    																			some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff. <br>dddddd    
    																		</span>
                </td>
              </tr>
            </tbody>
          </table>
          </span>
        </td>
      </tr>
      </tbody>
      </table>
      </td>
      </tr>
      <tr style="display: none;" abp="425">
        <td abp="426"></td>
      </tr>
      <tr>
        <td abp="428"></td>
        <td abp="429">
          <div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle B
        </td>
        <td abp="433">
          <span abp="434"></span>
        </td>
        <td abp="435"><span abp="436"></span></td>
        <td abp="437"><span class="MRLRecFldHover" abp="438"></span></td>
        <td abp="439"><span class="MRLRecFldHover" abp="440"></span></td>
      </tr>
      <tr title="Edit this item">
        <td abp="442"></td>
        <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span>
    </td>
    <td abp="448"><span></span></td>
    <td abp="450"><span></span></td>
    <td abp="452"><span></span></td>
    <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span>
      </span>
      </span>
    </td>
    </tr>
    <tr>
      <td></td>
      <td colspan="5">
        <table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462">
          <tbody abp="463">
            <tr class="noLn" abp="464">
              <td class="skForceFitCell" abp="465">
                <span abp="466">    
    														<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">    
    															<tbody abp="468">    
    																<tr abp="469">    
    																	<td style="padding-left: 40px;" abp="470"></td>    
    																	<td style="width: 100%; text-align: left;" abp="471">    
    																		<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">    
    																			some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd    
    																		</span>
              </td>
            </tr>
          </tbody>
        </table>
        </span>
      </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr title="Edit this item">
      <td abp="442"></td>
      <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah B</span>
  </td>
  <td abp="448"><span></span></td>
  <td abp="450"><span></span></td>
  <td abp="452"><span></span></td>
  <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span></span></span>
    </span>
    </span>
  </td>
  </tr>
  <tr>
    <td></td>
    <td colspan="5">
      <table cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td>
              <span>    
    														<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">    
    															<tbody abp="468">    
    																<tr abp="469">    
    																	<td style="padding-left: 40px;" abp="470"></td>    
    																	<td style="width: 100%; text-align: left;" abp="471">    
    																		<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">    
    																			some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd    
    																		</span>
            </td>
          </tr>
        </tbody>
      </table>
      </span>
    </td>
  </tr>
  </tbody>
  </table>
  </td>
  </tr>
  </tbody>
  </table>
</div>
</div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

这就是溢出的原因。如果你将它设置为隐藏在div上，任何流向其边界之外的内容，无论它是什么使它流到外面，它都会被剪裁。

理想情况下，正确的解决方案是更改标记。但是，如果你真的不能，你可以使用!important用css破解它：

#main div {
  overflow: initial !important;
}

#main {
  width: initial !important;
  overflow: initial !important;

}

div#SecListB {
  overflow: initial !important;
}

查看小提琴here.

Answer 2

本文......

some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff.

很可能是原因（它出现好几次）。它包含一个非常长的单词＆＃34;这会强制进入的表格单元格。但这完全是不现实的。使用真实文字长度的真实文本，这将改变整个场景。

（如果您不想输入文字，只需谷歌＆＃34;盲文文字生成器＆＃34; - 有些页面可以为您生成随机文本，您可以复制。）