Geek Answers Handbook

Display: table-row & overflow: auto show different behavior in Chrome, Firefox (and IE)

I am working on a project and I use display: table and table-row with automatic overflow. But in Firefox (and IE), nothing behaves as expected.

In Chrome, it behaves as it should.

Here is this StackOverflow question that seems very similar to my problem but no answers or samples are given.

I tried to reproduce this in JSbin and Fiddle, but this did not work.

To illustrate the behavior in Chrome and Firefox, I made two screengrabs:

Desired behavior in Chrome

Unwanted behavior in Firefox

I also created a small HTML example that can be found here . You can play by opening the website in Chrome and Firefox and expand the text area until the bottom containers fill the page.

the code

html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } .tableWrapper { display: table; height: 100%; background: darkgrey; table-layout: fixed; width: 800px; margin: 0 auto; } .textArea { background: #F9F9F9; padding: 10px 10px 5px 10px; margin: 10px; } .content { display: table-row; height: 100%; margin: 10px; } .content div { display: block; overflow: auto; height: calc(100% - 20px); height: -webkit-calc(100% - 20px); height: -moz-calc(100% - 20px); background: #ADE6DF; margin: 10px; } .content p { background: white; margin: 10px; padding: 5px; } 
 <div class="tableWrapper"> <div class="textArea"> <textarea></textarea> </div> <div class="content"> <div> <p> Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. </p> <p> Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. </p> </div> </div> </div>

This is very frustrating, I hope someone knows what is going on.

+7
html css firefox google-chrome
source share
2 answers

if you are ok with flex you can use it: ( https://jsfiddle.net/x59n7Lek/ - https://jsfiddle.net/x59n7Lek/1/ )

 * { box-sizing: border-box; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } .tableWrapper { display: flex; flex-direction: column; height: 100%; background: darkgrey; table-layout: fixed; width: 800px; margin: 0 auto; max-width: 100%; /*for the demo snippet */ max-height: 100%; /* maybe you still want to see the content if textarea is too big ? */ overflow: auto; } .textArea { display: flex; flex-direction: column; flex: 1; background: #F9F9F9; padding: 10px 10px 5px 10px; margin: 10px; } textarea { height: 100%; /* optionnal */ } .content { margin: 10px; min-height: 220px; display: flex; flex-direction: column; } .content div { flex: 1; overflow: auto; display: block; background: #ADE6DF; margin: 10px; } .content p, footer,header { background: white; margin: 10px; padding: 5px; } 
 <div class="tableWrapper"> <div class="textArea"> <textarea></textarea> </div> <div class="content"> <header>preview a bit small, test snippet in full page mode then resize window for behaviors</header> <div> <p> Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. </p> <p> Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. </p> </div> <footer>footer</footer> </div> </div>
+1
source share

This seems like a trick. Hope this is helpful.

  html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; } .tableWrapper { display: table; height: 100%; background: darkgrey; table-layout: fixed; width: 800px; margin: 0 auto; } .content { display: table-row; height: 100%; } .content div { display: block; overflow: auto; /* height: calc(100% - 20px); height: -webkit-calc(100% - 20px); height: -moz-calc(100% - 20px); */ height: 100%; background: #ADE6DF; margin: 10px; max-height: 80vh; min-height: 80vh; overflow: auto; } .content p { background: white; margin: 10px; padding: 5px; } .textArea { } .content p, footer,header { background: white; margin: 10px; padding: 5px; } 
  <div class="tableWrapper"> <div class="textArea"> <textarea></textarea> </div> <div class="content"> <div> <header>preview a bit small, test snippet in full page mode then resize window for behaviors</header> <p> Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. </p> <p> Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. Quisque eget ipsum lectus. Morbi ac vulputate velit. Phasellus condimentum nec orci eget sodales. Curabitur commodo ornare consequat. Proin vehicula mattis odio at feugiat. Nunc enim mi, viverra ut enim condimentum, malesuada fermentum felis. Aliquam erat volutpat. Fusce volutpat neque eget suscipit lobortis. </p> </div> <footer>footer</footer> </div> </div>
0
source share

More articles:


All Articles