使用 flexbox 时如何使一个项目始终保持相同大小并只让另一个项目缩小

Question

我在使用内部有两个项目的弹性容器时遇到问题。我希望第一个始终具有相同的宽度，我只希望另一个根据 flex 容器的宽度改变大小。我发现的解决方案在我使用 Mozilla Firefox 时似乎可以完美运行，但在我使用其他浏览器（Chrome、Brave、Edge...）时却不行。

这是HTML:

<div class="hero__container container-primary">
   <div class="hero__content">
      <h1>Are you looking for freelancers?</h1>
      <p class="hero__description body-normal">
         Hire Great Freelancers, Fast. Spacelance helps you hire elite
         freelancers at a moment's notice
      </p>
   </div>
   <img class="hero__image" src="./img/hero-image.png" alt="" />
</div>

这是CSS:

.hero__container {
  display: flex;
  justify-content: center;
  align-items: center;

  .hero__content {
    width: 634px;
    flex-shrink: 0;
  }

  .hero__image {
    width: 100%;
    max-width: 578px;
  }
}

在 Mozilla Firefox 中，它的行为完全符合我的要求，因为我使用开发人员工具手动缩小了屏幕的宽度。但是在 Google Chrome、Brave 和 Microsoft Edge 中，class="hero__content" 元素和 class="hero__image" 元素都溢出了 class="hero__container" 元素。这不是我要找的。

这是它在 Mozilla Firefox 中的样子：

这是它在《勇敢传说》中的样子：

Answer 1

默认情况下，图像的 min-width 为“自动”。如果您明确将其设置为 0，这将允许图像缩小到超出其实际大小。

  .hero__image {
    width: 100%;
    max-width: 578px;
    min-width: 0;
  }

使用 flexbox 时如何使一个项目始终保持相同大小并只让另一个项目缩小

How to make one item stay the same size all the time and let only another one shrink when using flexbox

html

css

flexbox