<p>I have an element which may contain very big amounts of data, but I don't want it to ruin the page layout, so I set <code>max-height: 100px</code> and <code>overflow:auto</code>, hoping for scrollbars to appear when the content does not fit. </p>

<p>It all works fine in Firefox and IE7, but IE8 behaves as if <code>overflow:hidden</code> was present instead of <code>overflow:auto</code>. </p>

<p>I tried <code>overflow:scroll</code>, still does not help, IE8 simply truncates the content without showing scrollbars. Changing <code>max-height</code> declaration to <code>height</code> makes overflow work OK, it's the combination of <code>max-height</code> and <code>overflow:auto</code> that breaks things.</p>

<p>This is also logged as an <a href="http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759" rel="noreferrer">official bug in the final, release version of IE8</a></p>

<p>Is there a workaround? For now I resorted to using <code>height</code> instead of <code>max-height</code>, but it leaves plenty of empty space in case there isn't much data.</p>

[{'answer_id': 668205, 'author': 'James Koch', 'author_id': 79509, 'author_profile': 'https://Stackoverflow.com/users/79509', 'pm_score': 2, 'selected': False, 'text': '<p>I saw this logged as a fixed bug in RC1.  But I\'ve found a variation that seems to cause a hard assert render failure.  Involves these two styles in a nested table.</p>\n\n<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;\n&lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"&gt;\n&lt;head&gt;\n    &lt;title&gt;Test&lt;/title&gt;\n    &lt;style type="text/css"&gt;\n    .calendarBody\n    {\n        overflow: scroll;\n        max-height: 500px;\n    }\n    &lt;/style&gt;\n&lt;/head&gt;\n&lt;body&gt;\n    &lt;table&gt;\n    &lt;tbody&gt;\n        &lt;tr&gt;\n        &lt;td&gt;\n            This is a cell in the outer table.\n        &lt;div class="calendarBody"&gt;\n            &lt;table&gt;\n                &lt;tbody&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;\n                    This is a cell in the inner table.\n                &lt;/td&gt;\n                    &lt;/tr&gt;\n            &lt;/tbody&gt;\n                &lt;/table&gt;\n        &lt;/div&gt;\n        &lt;/td&gt;\n    &lt;/tr&gt;\n    &lt;/tbody&gt;\n&lt;/table&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n'}, {'answer_id': 881597, 'author': 'Jeff Atwood', 'author_id': 1, 'author_profile': 'https://Stackoverflow.com/users/1', 'pm_score': 7, 'selected': True, 'text': '<p>This is a really nasty bug as it affects us heavily on Stack Overflow with <code>&lt;pre&gt;</code> code blocks, which have <code>max-height:600</code> and <code>width:auto</code>.</p>\n\n<p>It is logged as a bug in the final version of IE8 with no fix.</p>\n\n<p><a href="http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759" rel="noreferrer">http://connect.microsoft.com/IE/feedback/ViewFeedback.aspx?FeedbackID=408759</a></p>\n\n<p>There is a really, really hacky CSS workaround:</p>\n\n<p><a href="http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode" rel="noreferrer">http://my.opera.com/dbloom/blog/2009/03/11/css-hack-for-ie8-standards-mode</a></p>\n\n<pre class="lang-css prettyprint-override"><code>/*\nSUPER nasty IE8 hack to deal with this bug\n*/\npre \n{\n    max-height: none\\9 \n}\n</code></pre>\n\n<p>and of course conditional CSS as others have mentioned, but I dislike that because it means you\'re serving up extra HTML cruft in every page request.</p>\n'}, {'answer_id': 3862770, 'author': 'ANeves', 'author_id': 148412, 'author_profile': 'https://Stackoverflow.com/users/148412', 'pm_score': 1, 'selected': False, 'text': '<h1>To reproduce:</h1>\n<p>(This crashes the whole page.)</p>\n<pre><code>&lt;HTML&gt;\n&lt;HEAD&gt;\n    &lt;META content=&quot;IE=8&quot; http-equiv=&quot;X-UA-Compatible&quot;/&gt;\n&lt;/HEAD&gt;\n\n&lt;BODY&gt;\n    look:\n    \n    &lt;TABLE width=&quot;100%&quot;&gt;\n        &lt;TR&gt;\n            &lt;TD&gt;\n                &lt;TABLE width=&quot;100%&quot;&gt;\n                    &lt;TR&gt;\n                        &lt;TD&gt;\n                            &lt;DIV style=&quot;overflow-y: scroll; max-height: 100px;&quot;&gt;\n                                X\n                            &lt;/DIV&gt;\n                        &lt;/TD&gt;\n                    &lt;/TR&gt;\n                &lt;/TABLE&gt;\n            &lt;/TD&gt;\n        &lt;/TR&gt;\n    &lt;/TABLE&gt;\n&lt;/BODY&gt;\n&lt;/HTML&gt;\n</code></pre>\n<p>(Whereas this works fine...)</p>\n<pre><code>&lt;HTML&gt;\n&lt;HEAD&gt;\n    &lt;META content=&quot;IE=8&quot; http-equiv=&quot;X-UA-Compatible&quot;/&gt;\n&lt;/HEAD&gt;\n\n&lt;BODY&gt;\n    look:\n    \n    &lt;TABLE width=&quot;100%&quot;&gt;\n        &lt;TR&gt;\n            &lt;TD&gt;\n                &lt;TABLE width=&quot;100%&quot;&gt;\n                    &lt;TR&gt;\n                        &lt;TD&gt;\n                            &lt;DIV style=&quot;overflow-y: scroll; max-height: 100px;&quot;&gt;\n                                The quick brown fox\n                            &lt;/DIV&gt;\n                        &lt;/TD&gt;\n                    &lt;/TR&gt;\n                &lt;/TABLE&gt;\n            &lt;/TD&gt;\n        &lt;/TR&gt;\n    &lt;/TABLE&gt;\n&lt;/BODY&gt;\n&lt;/HTML&gt;\n</code></pre>\n<p>(And, madly, so does this. [No content in the div at all.])</p>\n<pre><code>&lt;HTML&gt;\n&lt;HEAD&gt;\n    &lt;META content=&quot;IE=8&quot; http-equiv=&quot;X-UA-Compatible&quot;/&gt;\n&lt;/HEAD&gt;\n\n&lt;BODY&gt;\n    look:\n    \n    &lt;TABLE width=&quot;100%&quot;&gt;\n        &lt;TR&gt;\n            &lt;TD&gt;\n                &lt;TABLE width=&quot;100%&quot;&gt;\n                    &lt;TR&gt;\n                        &lt;TD&gt;\n                            &lt;DIV style=&quot;overflow-y: scroll; max-height: 100px;&quot;&gt;\n                            &lt;/DIV&gt;\n                        &lt;/TD&gt;\n                    &lt;/TR&gt;\n                &lt;/TABLE&gt;\n            &lt;/TD&gt;\n        &lt;/TR&gt;\n    &lt;/TABLE&gt;\n&lt;/BODY&gt;\n&lt;/HTML&gt;\n</code></pre>\n'}, {'answer_id': 4969503, 'author': 'Egglabs', 'author_id': 171842, 'author_profile': 'https://Stackoverflow.com/users/171842', 'pm_score': 2, 'selected': False, 'text': '<pre><code>{\noverflow:auto\n}\n</code></pre>\n\n<p>Try div overflow:auto </p>\n'}, {'answer_id': 5867887, 'author': 'Ashish Joseph', 'author_id': 735892, 'author_profile': 'https://Stackoverflow.com/users/735892', 'pm_score': 2, 'selected': False, 'text': '<pre><code>{max-height:200px, Overflow:auto}\n</code></pre>\n\n<p>Thanks to Srinivas Tamada, The above code did work for me.</p>\n'}, {'answer_id': 7112645, 'author': 'enigment', 'author_id': 736006, 'author_profile': 'https://Stackoverflow.com/users/736006', 'pm_score': 1, 'selected': False, 'text': "<p>Similar situation, a pre element with maxHeight set by js to fit in allotted space, width 100%, overflow auto. If the content is shorter than maxHeight and also fits horizontally, we're good. If you resize the window so the content no longer fits horizontally, a horizontal scrollbar appears, but the height of element immediately jumps to the full maxHeight, regardless of the height of the content.</p>\n\n<p>Tried various forms of the css hack mentioned by Jeff, but didn't find anything like it that wasn't a js bad-parameter error.</p>\n\n<p>Best I could find was to pick your poison for ie8: Either drop the maxHeight limit, so the element can be any height (best for my case), or set height rather than maxHeight, so it's always that tall even if the content itself is much shorter. Very not ideal. Wacked behavior is gone in ie9.</p>\n"}, {'answer_id': 13172969, 'author': 'Abdul Rauf', 'author_id': 838301, 'author_profile': 'https://Stackoverflow.com/users/838301', 'pm_score': 1, 'selected': False, 'text': "<p>Set max-height only and don't set the overflow. This way it will show scroll bar if content is more than max-height and shrinks if content is less than the max-height.</p>\n"}, {'answer_id': 33763541, 'author': 'Vadim Svv', 'author_id': 3909772, 'author_profile': 'https://Stackoverflow.com/users/3909772', 'pm_score': 0, 'selected': False, 'text': '<p>I found this :\n<a href="https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/" rel="nofollow">https://perishablepress.com/maximum-and-minimum-height-and-width-in-internet-explorer/</a></p>\n\n<blockquote>\n  <p>This method has been verified in IE6 and should also work in IE5. Simply change the values to suit your needs (code commented with explanatory notes). In this example, we are setting the max-height at 333px 1 for IE and all standards-compliant browsers:</p>\n  \n  <p><code>* html div#division { \n     height: expression( this.scrollHeight &gt; 332 ? "333px" : "auto" ); /* sets max-height for IE */\n  }</code></p>\n</blockquote>\n\n<p>and this works for me perfectly so I decided to share this. </p>\n'}]
['https://Stackoverflow.com/questions/7707', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/979/']