Cal c () не работает на ширине flexbox в firefox

Question

Я пытаюсь использовать функцию css calc() с переменными для определения ширины flexbox. Это работает для меня в chrome и сафари, но firefox, кажется, не распознает значение вообще.

Вот как я хотел, чтобы это выглядело в Chrome.

И вот как это проявляется в Firefox.

Вот пример на codepen .

---

CSS:

:root {
    --card-width: 340px;
    --card-height: 150px;
    --card-padding: 20px;
}

html, body {
    background: #2e2e2e;
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
}    

.section {
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.card-holder {
    width: calc((var(--labelled-card-width, 340px) * 3) + ((var(--labelled-card-padding), 20px) * 2));
    height: calc((var(--labelled-card-height, 150px) * 2) + (var(--labelled-card-padding), 20px));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
}

.card {
    width: var(--labelled-card-width, 340px);
    height: var(--labelled-card-height, 150px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    color: #000;
    transition: 0.1s;
}

.card i {
    margin-left: -25px;
    margin-right: 14px;
    font-size: 3.4rem;
}

.card h4 {
    text-transform: uppercase;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

---

HTML:

<div class="section">

  <div class="card-holder">
      <a href="#" class="card">
          <i class="fa fa-check-circle"></i>
          <h4>Card<br>One</h4>
      </a>

      <a href="#" class="card">
          <i class="fa fa-check-circle"></i>
          <h4>Card<br>Two</h4>
      </a>

      <a href="#" class="card">
          <i class="fa fa-check-circle"></i>
          <h4>Card<br>Three</h4>
      </a>

      <a href="#" class="card">
          <i class="fa fa-check-circle"></i>
          <h4>Card<br>Four</h4>
      </a>
      <a href="#" class="card">
          <i class="fa fa-check-circle"></i>
          <h4>Card<br>Five</h4>
      </a>

      <a href="#" class="card">
          <i class="fa fa-check-circle"></i>
          <h4>Card<br>Six</h4>
      </a>

  </div>

</div>

---

Есть ли способ обойти эту проблему или я должен делать это по-другому?

Answer 1

По какой-то конкретной причине вы не используете CSS Сетка для этого?

Вместо использования flexbox вы можете просто сделать:

display: grid;
grid-template-columns: repeat(3, max-content);
grid-gap: 1em;

I Вы изменили ваш пример здесь: JSFiddle Пожалуйста, смотрите комментарии для строк, которые я изменил.

Надеюсь, это поможет! :)

Answer 2

Ваш синтаксис var неверен, каким-то образом Chrome сойдет с рук, но Firefox нет.

Значение по умолчанию должно быть в скобках. Вы написали это правильно для width и height, но не для padding.

Это неправильно:

.card-holder {
                                                 ∨                  ∨
    width: calc((var(--card-width, 340px) * 3) + ((var(--card-padding), 20px) * 2));

                                                   ∨                 ∨
    height: calc((var(--card-height, 150px) * 2) + (var(--card-padding), 20px));
}

Это должно быть:

.card-holder {
    width: calc((var(--card-width, 340px) * 3) + (var(--card-padding, 20px) * 2));
    height: calc((var(--card-height, 150px) * 2) + var(--card-padding, 20px));
}

/* VARIABLES */

:root {
  /* CARDS */
  --card-width: 340px;
  --card-height: 150px;
  --card-padding: 20px;
}


/* GLOBAL */

html,
body {
  background: #2e2e2e;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}


/* CARD HOLDER */

.section {
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.card-holder {
  width: calc((var(--card-width, 340px) * 3) + (var(--card-padding, 20px) * 2));
  height: calc((var(--card-height, 150px) * 2) + var(--card-padding, 20px));
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}


/* CARD */

.card {
  width: var(--card-width, 340px);
  height: var(--card-height, 150px);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  color: #000;
  transition: 0.1s;
}

.card i {
  margin-left: -25px;
  margin-right: 14px;
  font-size: 3.4rem;
}

.card h4 {
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" crossorigin="anonymous">

<div class="section">
  <div class="card-holder">
    <a href="#" class="card">
      <i class="fa fa-check-circle"></i>
      <h4>Card<br>One</h4>
    </a>
    <a href="#" class="card">
      <i class="fa fa-check-circle"></i>
      <h4>Card<br>Two</h4>
    </a>
    <a href="#" class="card">
      <i class="fa fa-check-circle"></i>
      <h4>Card<br>Three</h4>
    </a>
    <a href="#" class="card">
      <i class="fa fa-check-circle"></i>
      <h4>Card<br>Four</h4>
    </a>
    <a href="#" class="card">
      <i class="fa fa-check-circle"></i>
      <h4>Card<br>Five</h4>
    </a>
    <a href="#" class="card">
      <i class="fa fa-check-circle"></i>
      <h4>Card<br>Six</h4>
    </a>
  </div>
</div>