flexbox 父级中的奇怪元素行为 [Chrome Dev 95]答案

【问题标题】：Weird elements behaviour in the flexbox parent [Chrome Dev 95]flexbox 父级中的奇怪元素行为 [Chrome Dev 95]
【发布时间】：2021-11-13 09:38:12
【问题描述】：

Chrome Dev 如此奇怪地渲染了 flexbox。我只是固定屏幕

What am I expecting and how does it display in Firefox

Chrome Dev 95 | the image just filled the entire space

图像的宽度：100；高度：100%；样式，但在 flex 中它们会缩小到相同的宽度

.tournament__grid {
  width: 100%;

  margin-top: 40px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,  1fr));
  grid-template-rows: auto;
}

.grid__map {
  height: 340px;

  display: flex;
  flex-direction: column;
}

.tournament__map {
  height: 100%;

  padding: 10px;

  &.multiply {
    display: flex;
    flex-direction: row;

    padding: 0;

    .map__banner {
      position: relative;

      display: flex;
      align-items: center;
      justify-content: center;

      @include fontSize(24);
      font-weight: bold;
      text-decoration: underline;

      background: $mainBlack;

      object-fit: cover;
      object-position: center;
    }
  }
}

.tournament__grid
  .grid__map
    .map.tournament__map.multiply
      img.map__banner(src="https://source.unsplash.com/random/?paris")
      img.map__banner(src="https://source.unsplash.com/random/?paris")
      img.map__banner(src="https://source.unsplash.com/random/?paris")
      img.map__banner(src="https://source.unsplash.com/random/?paris")
      .map__banner +7
      .map__gradient
    .map__strip Lorem Ipsum
  .grid__column
  .grid__column
  .grid__column

【问题讨论】：

请同时添加您的css代码。
是的，没问题
尝试将justify-content: center 添加到.multiply 类
试过了，还是不行。我不知道为什么，但在 Chrome 中，图片占据了所有空间。

标签： css google-chrome flexbox

【解决方案1】：

这不是一个解决方案，但它有效

    .map__banner:nth-last-child(6):first-child, 
    .map__banner:nth-last-child(6):first-child ~ .map__banner {
      width: math.div(100%, 5);
    }

    .map__banner:nth-last-child(5):first-child, 
    .map__banner:nth-last-child(5):first-child ~ .map__banner {
      width: math.div(100%, 4);
    }

    .map__banner:nth-last-child(4):first-child, 
    .map__banner:nth-last-child(4):first-child ~ .map__banner {
      width: math.div(100%, 3);
    }

    .map__banner:nth-last-child(3):first-child, 
    .map__banner:nth-last-child(3):first-child ~ .map__banner {
      width: math.div(100%, 2);
    }

【讨论】：