css 为什么我的flex项目没有占据flex容器的整个宽度？

sycxhyv7 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(118)

我有一个大的flex容器和两个小的flex容器。这两个小的flex容器都有两个flex项目。我面临的问题是，第二个小的flex容器中的两个flex项目没有占用第二个小的flex容器的全部宽度。
Image of one big flex container containing two small flex containers each containing two flex items. A black arrow points to a red column streak of pixels in the second small flex container, the red column streak of pixels is at the right-end of the second small flex container. The code is rendered on Safari Version 16.6.1

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

.SMALL-flex-container {
  min-width: 50%;
  max-width: 50%;
  display: flex;
  background-color: red;
  overflow: scroll;
}

.flex-item {
  min-width: 100%;
  max-width: 100%;
  height: 300px;
}

.flex-item-1 {
  background-color: blue;
}

.flex-item-2 {
  background-color: green;
}

个字符
隐藏溢出确实会删除列条纹，但会使我的第二个小flex容器无法滚动。我还使用JavaScript在溢出隐藏时以编程方式滚动第二个小flex容器，但条纹返回了！我所期望的是，我的flex项目完美地填充了我的第二个小flex容器，而第二个小flex容器的背景色不显示。

css

来源：https://stackoverflow.com/questions/77740230/why-are-my-flex-items-not-taking-up-the-full-width-of-my-flex-container

1条答案

按热度按时间

ljo96ir51#

像这样的伪影确实会不时出现。它们通常在某些视口配置中可见，而在其他视口配置中则不可见。如果你调整浏览器窗口的大小，我想你会发现这种伪影存在于某些尺寸中，但不是所有尺寸。浏览器以小数像素计算宽度和高度，但当渲染时，值必须四舍五入到整个像素。我们已经知道for years问题，并且没有解决方案。忽略它，您的代码没有任何错误。通过仔细选择背景颜色来最大限度地减少影响。
不过，我想对你的代码提出一个不相关的改进建议，与其将min-width: 100%和max-width: 100%组合起来防止flex项收缩，不如设置width: 100%和flex-shrink: 0。

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

.SMALL-flex-container {
  width: 50%;
  display: flex;
  background-color: red;
  overflow: scroll;
}

.flex-item {
  width: 100%;
  height: 300px;
  flex-shrink: 0;
}

.flex-item-1 {
  background-color: blue;
}

.flex-item-2 {
  background-color: green;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 为什么我的flex项目没有占据flex容器的整个宽度？

1条答案

相关问题

热门标签

最新问答