CSS layout issue with Firefox

Question

In an existing project I have the layout working in all the browsers except Firefox, and before I go ahead and rip it all up, I was wondering if there was a quick fix.

Given the following: https://jsfiddle.net/2m690rux/3

The scrollable area in the middle is not scrolling because Firefox will not scroll content unless it knows the actual hight in pixels, and you cannot say height:100% (as the sample does) but this does work in Chrome and others.

I have been able to calculate and set the height of the scroll area by removing the content, measuring the .height() and then put the content back. Although this works... it is painful and requires very many changes to code.

Most of you are probably going to suggest using some complicated arrangements of DIVs and not tables, getting them to behave the same through some of the most mind boggling CSS hacks and tricks... so, I was wondering if anyone knows the simplest solution, considering that this sample is only a small example of a much much bigger code set... changes now will have huge ramifications.

body, html{
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
body{
  position: static;
}
.container {
  height: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.theTable{
  width: 100%;
  height: 100%;
}
.topSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}
.midSection{
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
  padding: 5px;
}
.scrollContainer{
  height: 100%; /* <-- This is a problem for Firefox */
  overflow-y: auto;
}
.bottomSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}

<div class=container>
 <table class=theTable cellspacing=5 cellpadding=2>
  <tr>
   <td class="topSection">
    <div>n items of unknow height (no scroll)</div>
   </td>
  </tr>
  <tr>
   <td class=midSection>
    <div class=scrollContainer>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
    </div>
   </td>
  </tr>
  <tr>
    <td class=bottomSection>
     <div>n items of unknow height (no scroll)</div>
    </td>
  </tr>
 </table>
</div>

@Paulie_D I didn't even realise this site had a code snippet tool, i have updated it. — Conrad, Jun 19 '20 at 09:32
So you want the mid section to be scrollable if there is a lot of content? — Sam, Jun 19 '20 at 09:36
@Sam Correct - if viewed in Chrome and Firefox as the sample is now, you can see the two browsers behaving different. — Conrad, Jun 19 '20 at 09:38
Do you really need a table here ? , because for such a layout flex or grid do the job really well. — G-Cyrillus, Jun 19 '20 at 09:44
@G-Cyrillus I know, I know... tables right? is it really such a problem? I mean are tables not just elements on a page with a predefined display. If this is truly not possible with tables, i guess ill have to change it... i'm really reluctant tho and don't know what new can of worms im opening up. — Conrad, Jun 19 '20 at 09:52
Well, I'd always go with divs! The real can of worms are the tables ;-) They are rigid and hard to manipulate if you want something special from them. And responsive design is a nightmare with tables. So I would replace them by divs whenever and wherever possible. — Sam, Jun 19 '20 at 09:58
table seems a problem with FF, position:relative/absolute might help : https://codepen.io/gc-nomade/pen/MWKJEzK . If your table is here only for a layout purpose, drop it, use flex or grid , you'll find these much more usefull later ;) — G-Cyrillus, Jun 19 '20 at 09:59
@G-Cyrillus That's exactly what im looking for... Thank you! — Conrad, Jun 19 '20 at 10:03

score 1 · Accepted Answer · answered Jun 19 '20 at 10:01

position might help : (if table is not needed , you may inspire yourself from Fill remaining vertical space with CSS using display:flex )

body, html{
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}
body{
  position: static;
}
.container {
  height: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.theTable{
  width: 100%;
  height: 100%;
}
.topSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}
.midSection{
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
  padding: 5px;
  position:relative;
}
.scrollContainer{
  height: 100%; /* <-- This is a problem for Firefox */
  overflow-y: auto;
  position:absolute;
  top:0;
  left:0;
  width:100%;
}
.bottomSection{
  height: 1px;
  border: 1px solid #CCCCCC;
  border-radius: 5px;
  background-color: #F3F3F3;
  vertical-align: top;
}

<div class=container>
 <table class=theTable cellspacing=5 cellpadding=2>
  <tr>
   <td class="topSection">
    <div>n items of unknow height (no scroll)</div>
   </td>
  </tr>
  <tr>
   <td class=midSection>
    <div class=scrollContainer>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
     <div>Item n of x</div>
    </div>
   </td>
  </tr>
  <tr>
    <td class=bottomSection>
     <div>n items of unknow height (no scroll)</div>
    </td>
  </tr>
 </table>
</div>

@Conrad inside the scrolling div : https://codepen.io/gc-nomade/pen/MWKJEzK ? — G-Cyrillus, Jun 19 '20 at 10:18
@G-Cyrillus I see you used calc(), nice thanks. I have already implemented the changes. This is the result: https://www.innovateasterisk.com/phone/ — Conrad, Jun 20 '20 at 11:05

score 0 · Answer 2 · answered Jun 19 '20 at 09:44

0

While I don't understand why your code should work in other browsers, the issue is quite simple to solve. If you set height: 100% the respective div will have the total height of it's content, so there is nothing to scroll!

If you want your cell to be scrollable, you have to set a max-height to the scrollContainer. Let´s say for example the max-height was 200px, then the result would be this.

Your overflow-y: auto; is correct, but it needs to know when the content overflows. With a height of 100% there is no content overflowing.

answered Jun 19 '20 at 09:44

Sam

243
5
16

This doesn't fix his issue in any form. – Alexandre Elshobokshy Jun 19 '20 at 09:46
This does not solve the problem. The "when" in when it must scroll is when the the content (heigh) of scrollContainer exceeds its parent (this has an unknown height) – Conrad Jun 19 '20 at 09:48
Maybe I misunderstand your question/statement, but you *need* to define a hight so that the content can exceed the parent container. As your parent container has no fixed height, either I don't see how this should work. – Sam Jun 19 '20 at 09:53
@Sam In all other browsers except Firefox, scroll bars appear when the rows are increased. As I mentioned, I am able to set the height statically with a javascript, but am looking for a CSS only solution. – Conrad Jun 19 '20 at 09:59

CSS layout issue with Firefox

2 Answers2