width:max-content works in chrome but not in firefox

Question

I have a div that wraps a table and I added width:max-content to it so that scrollbar will stick to the side of the table whatever width it gets based on it's content. It works well on Chrome but doesn't work the same with Firefox (94.0.1). Is there a different way to do this in Firefox?

I also tried adding white-space: nowrap but horizontal scrollbar appears.

Here is my CSS and html (I am using bootstrap):

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SAMPLE</title>

    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    
<style type="text/css">
        
    .form-container {
        font-size: 16px !important;
        margin: 20px auto;
        font-family: auto !important;
    }
            
    .div-container {
        font-size: 16px !important;
        margin-bottom: 15px;
        margin: 10px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
        min-height: 12px;
        border-width: 1px;
        border-style: solid;
    }
    
    
    h3{
        font-size: 30px;
    }
    
    
     
    .tableDiv { overflow-y: auto; max-height: calc(90vh - 210px); width: auto;  max-width: 100%;}
    
    @supports(width: max-content){
      .tableDiv { overflow-y: auto; max-height: calc(90vh - 210px); width: max-content; width: -moz-max-content; max-width: 100%;}
    
    }
    
    
    
    table {
      width: auto !important;
      text-align: center;
      border-collapse: separate;
      border-spacing: 0;
    }
    
    .margin-bottom-sm{
       margin-bottom: 1px;
    }
    
    table th {
      border-top: 1px solid;
      border-bottom: 1px solid;
      border-right: 1px solid;
    }

   
     
    .tableDiv thead th { 
      position: sticky; 
      top: 0; 
      z-index: 1; 
      background-color: #fefefe;
     }
     
</style>

</head>
<body>
<div  style="width: 1536px;">
     <div class="form-container"> 
        <div class="div-container">
            <div style="padding-bottom: 15px">
                <h3><strong>SAMPLE PAGE</strong></h3>
            </div>
            
    
                
                <div  class="tableDiv" style="display: inline-block;" >
                    <table class="table table-bordered margin-bottom-sm">
                        <thead>
                            <tr>
                                <th scope="col">No.</th>
                                <th scope="col">Company</th>
                            </tr>
                        </thead>
                        <tbody>
                                <tr>
                                    <td>1</td>
                                    <td> Company Name 0</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td> Company Name 1</td>
                                </tr>
                                
                                <tr>
                                    <td>3</td>
                                    <td> Company Name 2</td>
                                </tr>
                                
                                <tr>
                                    <td>4</td>
                                    <td> Company Name 3</td>
                                </tr>
                                
                                <tr>
                                    <td>5</td>
                                    <td> Company Name 4</td>
                                </tr>
                                
                                <tr>
                                    <td>6</td>
                                    <td> Company Name 5</td>
                                </tr>
                                
                                <tr>
                                    <td>7</td>
                                    <td> Company Name 6</td>
                                </tr>
                                
                                <tr>
                                    <td>8</td>
                                    <td> Company Name 7</td>
                                </tr>
                                
                                <tr>
                                    <td>8</td>
                                    <td> Company Name 7</td>
                                </tr>
                                
                                <tr>
                                    <td>8</td>
                                    <td> Company Name 7</td>
                                </tr>
                                
                                <tr>
                                    <td>8</td>
                                    <td> Company Name 7</td>
                                </tr>
                                
                                <tr>
                                    <td>8</td>
                                    <td> Company Name 7</td>
                                </tr>
                        </tbody>
                        </table>
                </div>
        </div>
    </div>
    </div>
</body>
</html>

Chrome:

Firefox (94.0.1):

@ngearing Please refer to [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/width#browser_compatibility) table for `width`. If Firefox isn't utilizing `width: max-content;` but supports it, then it should be prefixed as `width: -moz-max-content;`. — Tanner Dolby, Nov 23 '21 at 04:59
Hi @TannerDolby , Table content still looks the same in firefox. — Fancy, Nov 23 '21 at 05:08
if valid on caniuse then something else is wrong with your code : https://caniuse.com/?search=max-width (which is the case here) — avia, Nov 23 '21 at 05:41
It's a valid bug related to `oveflow:auto` https://bugzilla.mozilla.org/show_bug.cgi?id=764076 For now, you can use `overflow-y: scroll;` on firefox. Fiefox doesn't support `scrollbar-gutter: stable` yet. — the Hutt, Nov 23 '21 at 09:26
@onkarruikar OMG! thank you so much, this fixed my issue. I'm not sure why my question got closed , it's under review but your answer is the right one. — Fancy, Nov 23 '21 at 09:40
@Fancy you can accept onkarruikar's answer now as you wrote that it solved your issue — YakovL, Dec 05 '21 at 12:38

score 1 · Accepted Answer · answered Dec 02 '21 at 16:48

It's a valid bug related to oveflow:auto. Refer https://bugzilla.mozilla.org/show_bug.cgi?id=764076
Here is the clear minimal reproducible example. Behaves different on Chrome and Firefox.

They are implementing scrollbar-gutter property which will fix this.
For now, you can use overflow-y: scroll; on Firefox.

.tableDiv {
  overflow-y: scroll;    /* <-- show scroll */
  max-height: calc(90vh - 210px);
  width: auto;
  max-width: 100%;
}

@supports(width: max-content) {
  .tableDiv {
    overflow-y: scroll;  /* <-- show scroll */
    max-height: calc(90vh - 210px);
    width: max-content;
    width: -moz-max-content;
    max-width: 100%;
  }
}

This discussion might help for making it browser specific.
Note: overflow-y: scroll will always show scroll bar, even if content is smaller than the container size.

width:max-content works in chrome but not in firefox

1 Answers1