使用大众单位时CSS计算值不正确[重复]

Question

我有一个页面，其中有一个 250 像素宽的侧边栏和一个 100% 宽度的主要内容容器，用于填充剩余空间，位于侧边栏旁边。这些项目是具有父 flex 容器的 flex-children。

HTML：

  <div className="flex-container">
      <div className="sidebar">sidebar</div>
      <div className="main-container">main container</div>
  </div>

CSS：

.flex-container {
    display: flex;
    flex: 1;
}

.sidebar {
    width: 250px;
}

.main-container { 
    width: 100%;
}

这正常工作，但在一个页面上，我有一个表格，它可以拉伸主内容面板，使页面的宽度超过 100%，从而导致水平滚动条。

为了解决这个问题，我尝试使用以下代码计算内容容器的固定宽度：

.main-content {
    width: calc(100vw - 250px);
}

这主要是可行的，但计算偏离了 17 像素，导致了一个较小但仍然存在的水平滚动条，我不知道为什么。这是因为 vw 计算中包含的滚动条宽度吗？

有没有办法解决这个问题？

如果我取主容器的宽度并从内部视口宽度中减去它，它会留下 233 像素的空间，小于应有的 250 像素，并有 17 像素的余数。

我正在使用 Google Chrome 进行测试，但任何解决方案都应该兼容跨浏览器。

Answer 1

您不应该对 flex 子项使用 width:100%，而应使用 flex-grow/shrink 和 basic 规则或 min/max-size 规则。

不确定您的真实上下文是max-width:calc(100% - 250px ); 的示例：

.flex-container {
  display: flex;
  margin-bottom: 1em;
  /*demo purpose */
}

.sidebar {
  width: 250px;
}

.main-container {
  max-width: calc(100% - 250px);
}


/* add padding, border and margin or a gap to see how that behaves */

.sidebar,
.main-container {
  padding: 1em;
  border: solid;
  margin: 5px;
}


/* make it overflow for sure*/

table:hover td {
  border: 1px solid;
  padding: 0 1vw;
  font-size: 5vw;
}

.flex-container+.flex-container>* {
  margin: 0;
}

.flex-container:nth-child(3) {
  gap: 1em
}

<div class="flex-container">
  <div class="sidebar">sidebar</div>
  <div class="main-container">main container
    <table>
      <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
      </tr>
    </table>
  </div>
</div>

<div class="flex-container">
  <div class="sidebar">sidebar (no margin)</div>
  <div class="main-container">main container(no margin)
    <table>
      <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
      </tr>
    </table>
  </div>
</div>
<div class="flex-container">
  <div class="sidebar">sidebar (no margin but a gap)</div>
  <div class="main-container">main container (no margin but a gap)
    <table>
      <tr>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
        <td>td</td>
      </tr>
    </table>
  </div>
</div>

Answer 2

尝试控制 flex 容器的子元素的 flex 增长/收缩：

.flex-container {
    display: flex;
    flex: 1;
    width: 100vw;
}

.sidebar {
    width: 250px;
    flex-shrink: 0;
}

.main-container { 
    width: 100%;
    min-
}