How to prevent overflow of div content

Question

I have a html that when the window shrinks, the content of sub divs gets cutoff. Even though the outermost div is overflow:auto, and there is a scroll bar.. I notice that overflow:hidden is set in multiple child divs. The thing is the inner html are generated from some API and it would impractical to reset all these overflow properties.

My question is:

the height/width of these child divs are not set, why the overflow property still applies?
is there another way to prevent cutoff in child div? Like making sure the parent div has enough height?

Below is a simplified version of my html:

<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>

sn3ll · Accepted Answer · 2017-03-31 14:32:12Z

3

Thats just how overflow works. If you set it to hidden on a div, any content that flows outside of its boundaries, regardless of what makes it flow outside, it gets clipped.

Ideally the proper solution would be to change the markup. However, if you really can't, you can hack it with css using !important:

#main div {
  overflow: initial !important;
}

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

}

div#SecListB {
  overflow: initial !important;
}

Check out a fiddle here.

answered Mar 31, 2017 at 14:32

sn3ll

1,6851 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hui Liu Over a year ago

thanks@sn3ll, in the CSS school it says "The overflow property only works for block elements with a specified height.", but in my html, I didn't, why the overflow:hidden still applies?

sn3ll Over a year ago

As far as I can see the overflow issue have to so with the width, not height, correct?

Hui Liu Over a year ago

actually I was trying to make the height works, so if you shrink the window small enough, the content on the bottom is cutoff. There is still scrollbar, but the text on the bottom is still not visible even if you scroll all the way down...

Johannes · Accepted Answer · 2017-03-31 13:56:15Z

0

This text...

some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff.

is most likely the cause (it appears several times). It contains one extremely long "word" which forces the table-cell which is in to be extended. But that's completely unrealistic. Use real text with real word lenghts, this will change the whole scenario.

(If you don't want to type text, just google "blindtext generator" - there are pages that generate random text for you which you can copy.)

answered Mar 31, 2017 at 13:56

Johannes

67.9k22 gold badges85 silver badges139 bronze badges

Collectives™ on Stack Overflow

How to prevent overflow of div content

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related