Hui Liu
Reputation: 407
How to prevent overflow of div content
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>Upvotes: 1
Views: 1840
Answers (2)
sn3ll
Reputation: 1685
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.
Upvotes: 3
Johannes
Reputation: 67758
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.)
Upvotes: 0
Related Questions
- stop div content overflowing?
- How to prevent elements inside div from overflowing?
- How can I prevent overflow on a div?
- HTML DIV Overflowing, How To Stop?
- HTML - Prevent overflow?
- Prevent div from overflowing
- Div Content Overflowing
- How can stop a container div allowing contents to overflow?
- CSS: content that overflows div
- CSS content overflowing containing div