width:max-content 适用于 chrome 但不适用于 firefox
[英]width:max-content works in chrome but not in firefox
问题描述
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.
我有一个包装表格的div ，并在其中添加了width:max-content ，以便滚动条根据其内容获得的任何宽度都将粘在表格的一侧。 It works well on Chrome but doesn't work the same with Firefox (94.0.1).它在 Chrome 上运行良好，但与 Firefox (94.0.1) 不同。 Is there a different way to do this in Firefox?在 Firefox 中是否有其他方法可以做到这一点？
I also tried adding white-space: nowrap but horizontal scrollbar appears.我也尝试添加white-space: nowrap但出现水平滚动条。
Here is my CSS and html (I am using bootstrap):这是我的 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>
Chrome:铬合金：
Firefox (94.0.1): Firefox (94.0.1)：
1 个解决方案
解决方案1
0 2021-12-02 16:48:41
It's a valid bug related to oveflow:auto .这是一个与oveflow:auto相关的有效错误。 Refer https://bugzilla.mozilla.org/show_bug.cgi?id=764076参考https://bugzilla.mozilla.org/show_bug.cgi?id=764076
Here is the clear minimal reproducible example .这是明确的最小可重现示例。 Behaves different on Chrome and Firefox.在 Chrome 和 Firefox 上表现不同。
They are implementing scrollbar-gutter property which will fix this.他们正在实现将解决此问题的滚动条装订线属性。
For now, you can use overflow-y: scroll;现在，你可以使用 overflow-y: scroll; on Firefox.在 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.注意： overflow-y: scroll将始终显示滚动条，即使内容小于容器大小。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.