如何删除带有包装项目的 flexbox 末尾未使用的空间？答案

【问题标题】：How can I remove the unused space at the end of a flexbox with wrapped items?如何删除带有包装项目的 flexbox 末尾未使用的空间？
【发布时间】：2023-01-30 20:19:03
【问题描述】：

我遇到了 flexbox 和包装项目的问题。我正在使用 react 和 mui，但为了方便起见，我用纯 html 和 css 编写了示例代码。但是，如果您知道 mui/react 中的解决方案，那么也请告诉我；）可以在此处找到代码：https://codepen.io/andieis/pen/mdjjoRv。

<div id="wrapper">
  <div id="content-left">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
  <div id="content-right">
    <div id="fixed"><img
                         src="https://thumbs.dreamstime.com/b/example-rubber-stamp-grunge-design-dust-scratches-effects-can-be-easily-removed-clean-crisp-look-color-easily-85561254.jpg" />
    </div>
  </div>
</div>

* {
    margin: 0;
}

#wrapper {
    display: flex;
}

#content-left {
    background-color: yellow;
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    gap: 30px;
}

.card {
    width: 400px;
    height: 300px;
    background-color: blue;
}

#content-right {
    background-color: red;
    flex: 1;
}

#fixed {
    position: fixed;
    top: 0;
    right: 0;
}

我想得到以下结果：右侧是一些卡片。当项目多于显示时，应该是可滚动的。右侧是另一个包含地图的容器。这不应该是可滚动的。如果我在左侧滚动，则当我在左侧滚动时，地图（或示例中的图像）应该保留。现在最大的问题是：如何去除卡片和红色图像之间的黄色垂直线？如果它环绕，应调整地图的宽度，使垂直黄线不存在。有谁知道我如何实现这一目标？

我不想使用 space-between、space-evenly 或类似的东西。它应该改变地图的大小而不是卡片之间的间隙。

非常感谢你的帮助！

【问题讨论】：

你可以添加图片吗？一个突出问题，另一个显示所需的最终结果。

标签： css reactjs flexbox material-ui

【解决方案1】：

我不能真正相信这一点，因为 stackoverflow 已经为此提供了解决方案，但这似乎在下面提供了预期的效果。关键部分似乎为 max-width 设置了一个明确的值（而不是百分比），它允许浏览器计算出列数和父级大小以适应。虽然有点“神奇的数字”-y 将 max-width 设置为 50vw 会导致左侧元素在图像到达右侧元素的边缘时缩小。

* {
  margin: 0;
}

#wrapper {
  display: flex;
}

#content-left {
  background-color: yellow;
  display: grid;
  grid-template-columns: repeat(auto-fit, 400px);
  max-width: 50vw; /* adjust this to suit */
  gap: 30px;
}

.card {
  width: 400px;
  height: 300px;
  background-color: blue;
}

#content-right {
  background-color: red;
  flex: 1;
}

#fixed {
  position: fixed;
  top: 0;
  right: 0;
}

<div id="wrapper">
  <div id="content-left">
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
    <div class="card"></div>
  </div>
  <div id="content-right">
    <div id="fixed"><img src="https://thumbs.dreamstime.com/b/example-rubber-stamp-grunge-design-dust-scratches-effects-can-be-easily-removed-clean-crisp-look-color-easily-85561254.jpg" />
    </div>
  </div>
</div>

【讨论】：