width:max-content 适用于 chrome 但不适用于 Firefox答案

【问题标题】：width:max-content works in chrome but not in firefoxwidth:max-content 适用于 chrome 但不适用于 Firefox
【发布时间】：2021-11-23 04:28:15
【问题描述】：

我有一个包裹表格的div，我在其中添加了width:max-content，这样滚动条就可以根据其内容的宽度固定在表格的一侧。它适用于 Chrome，但不适用于 Firefox (94.0.1)。在 Firefox 中是否有其他方法可以做到这一点？

我也尝试添加white-space: nowrap，但出现水平滚动条。

这是我的 CSS 和 html（我正在使用引导程序）：

<!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>

铬：

火狐（94.0.1）：

【问题讨论】：

@ngearing 请参阅browser compatibility 表以获取width。如果 Firefox 没有使用 width: max-content; 但支持它，那么它的前缀应该是 width: -moz-max-content;。
嗨@TannerDolby，表格内容在 Firefox 中看起来仍然一样。
如果在 caniuse 上有效，那么您的代码有其他问题：caniuse.com/?search=max-width（这里就是这种情况）
这是一个与oveflow:auto bugzilla.mozilla.org/show_bug.cgi?id=764076 相关的有效错误现在，您可以在firefox 上使用overflow-y: scroll;。 Fiefox 尚不支持scrollbar-gutter: stable。
@onkarruikar OMG！非常感谢，这解决了我的问题。我不确定为什么我的问题已关闭，正在审核中，但您的答案是正确的。

标签： html css

【解决方案1】：

这是一个与oveflow:auto 相关的有效错误。参考https://bugzilla.mozilla.org/show_bug.cgi?id=764076
这是明确的最小reproducible example。在 Chrome 和 Firefox 上表现不同。

他们正在实施 scrollbar-gutter 属性，这将解决这个问题。
现在，你可以使用overflow-y:scroll;在 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 可能有助于使其特定于浏览器。
注意：overflow-y: scroll 将始终显示滚动条，即使内容小于容器大小。

【讨论】：