CSS，Flexbox尺寸调整问题有人可以解释发生了什么吗？

如何解决CSS，Flexbox尺寸调整问题有人可以解释发生了什么吗？

嗨，我正在尝试制作netflix克隆并按照我想要的方式进行所有工作，但是布局存在问题。无论我如何设置包含未更改图像的div的宽度。我已经使用过控制台，似乎没有任何规则可以阻止它们的增长。我将图像设置为其父容器宽度的100％，但这会使它们变得很小。

我真的对CSS感到困惑，因为没有控制台告诉您出了什么问题。如果有人可以看一下并帮助我理解，我将不胜感激。（而且，有人知道在处理CSS时要停止像白痴一样需要多长时间吗？）

我在下面包含了代码。 row__imgLarge仅应用于特定的一行。这和其他人有同样的问题。

<div className="row__images">
    {movies.map((movie) => (
      <div
        className={`row__imgContainer  ${
          isLargeRow ? "row__imgLarge" : ""
        }`}
        key={movie.id}
        onClick={() => handleClick(movie)}
      >
        <img
          className="row__image"
          // {some movies don't have the a backdrop image,in these cases use poster instead}
          src={`${base_url}/${
            isLargeRow || !movie.backdrop_path
              ? movie.poster_path
              : movie.backdrop_path
          }`}
          alt={movie?.title || movie?.name || movie?.original_name}
        />
      </div>
    ))}

.row__images {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
  padding: 20px;
}

.row__imgContainer {
  /* width: 15.8vw; */
  max-height: 40vh;
  width: 150vw;
  margin-right: 0.6vw;
}

.row__image {
  width: 100%;
  transition: transfrom 440ms;
}

.row__imgLarge {
  max-height: 40vh;
}

解决方法

弹性物品的宽度（弹性容器的子代）由弹性容器决定。您需要使用flex属性控制它们。在容器上查看justify-content，在项目上查看flex-grow，flex-shrink和flex-basis。

例如，如果要使项目具有特定的不变宽度，则可以将“增长和缩小”设置为0，然后将其设置为所需的宽度：

.row_imgContainer {
  flex-grow: 0; /* don't grow */
  flex-shrink: 0; /* don't shrink */
  flex-basis: 200px; /* desired width */
}

.row_imgContainer {
  flex: 0 0 200px; /* shorthand,same as above */
}

如果只需要水平滚动的图像行，请在flex容器上设置overflow: auto（或滚动），不要让这些项目缩小：

.container {
  display: flex;
  overflow-x: auto;
  max-width: 500px;
}

.container>* {
  flex: 0 0 200px;
}

<div class="container">
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/201" />
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/199" />
  <img src="//placekitten.com/200" />
  <img src="//placekitten.com/202" />
  <img src="//placekitten.com/204" />
</div>