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

user_12597130 0
Viewed 229

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:

enter image description here

Firefox (94.0.1):

enter image description here

css html
1 Answers

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.

user_152739680
Related