在 css 中用 % 改变我的宽度，改变 bootstrap flex

Question

我遇到了一个奇怪的问题。 我在我的 div 容器中添加了一个

d-flex justify-content-between 容器

带有一侧文字和其他图像。 但是当我用 % 例如 (width:5%) 改变宽度时，flex 变得很奇怪，一切都将结束。

某点：当我用 vh vw 或 px 改变宽度时，它可以工作，但我需要 %. 我能做些什么？

JSX：

<section className='footer-area'>
        <div className='d-flex justify-content-between container'>
          <div className='address'>
            <h4>Home@re-friendly.com</h4>
            <h4>ארלוזרוב 11, רמת גן</h4>
          </div>
          <div className='mw-3 share '>
            <img
              src={facebookLogo}
              className='img-fluid'
              alt='Responsive image'
              onClick={() =>
                window.open(
                  "https://www.facebook.com/"
                )
              }
            />
            <img
              src={whatsappLogo}
              className='img-fluid'
              alt='Responsive image'
              onClick={() => window.open("https://wa.me/+972505710373")}
            />
          </div>
        </div>
      </section>

CSS：

.img-fluid {
  margin: 2vh;
  max-width: 10%;
  height: auto;
}

奇怪的页脚

应该如何： （用 vh 做的，但我需要用 % 做）

Answer 1

对于flex子项flex属性而不是宽度。

所以要实现5%宽度使用flex: 0 0 5%; 在您的 css 属性中

Answer 2

  .img-fluid {
    margin: 2vh;
    max-width: 10%;
    height: auto;
    float: left;
     }