Столбцы одинаковой высоты в Firefox (CSS)

Question

У меня проблема со столбцами одинаковой высоты, и я знаю, что такие вопросы постоянно задаются технически (исходя из того, что я получил из своих исследований), но, к сожалению, я достиг точки, в которой я просто не знаю, что еще попробовать,

У меня есть колонки одинаковой высоты в Chrome и Opera, но каким-то образом Firefox не нравится, как я это сделал.

У меня есть простая наценка

<section id="env">
  <div class="container">
    <div class="content">
      <p>
        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 2
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 3
      </p>
    </div>
  </div>
</section>

и div #env отображается как таблица, div.container - как ячейки таблицы.

#env {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}

.container {
  display: table-cell;
  border 25px solid transparent;
  width: 33.33333%;
}

.content {
  background: red;
  display: inline-block;
  vertical-align: top;
  height: 100%;
  width: 100%;
  border-radius: 3px;
}

p {
  padding: 0 20px;
}

Я создал скрипку, чтобы сосредоточиться на проблеме: https://jsfiddle.net/vy3Lzu75/1/

Если вы откроете его в Chrome или Opera, вы должны увидеть три одинаково высоких красных столбца. Однако в Firefox красные столбцы соответствуют их индивидуальному содержимому, а не фактическому контейнеру.

Я был бы очень признателен, если бы кто-нибудь мог указать мне правильное направление, потому что все, что я до сих пор пробовал (установка высоты родительского элемента в 1 пиксель, установка минимальной высоты дочернего элемента, различные отображаемые значения...) не выполняла трюк в FF.

Заранее спасибо!

Answer 1

Клетки здесь рисуют столбцы. интервал границы может использоваться, чтобы установить некоторую область вокруг.

#env {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 30px 5px;
}

.container {
  display: table-cell;
  width: 33.33333%;
  background: red;
  border-radius: 3px;
  vertical-align: top;
}

.content {
}

p {
  padding: 0 20px;
}

<section id="env">
  <div class="container">
    <div class="content">
      <p>
        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 2
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 3
      </p>
    </div>
  </div>
</section>

https://jsfiddle.net/vy3Lzu75/2/

---

Если вы хотите, чтобы содержимое заполняло все доступное пространство, вам нужно добавить гибкие блоки, чтобы можно было выделить поле для разделения каждого столбца:

#env {
  display: flex;
  width: 100%;
  border-collapse: separate;
  border-spacing: 5px;
}

.container {
  display: flex;
  flex-flow:column;
  margin:5px 30px;
  width: 33.33333%;
  background: red;

}

.content {
  flex:1;
  background:green;
  border-radius: 10px;
}

p {
  padding: 0 20px;
}

<section id="env">
  <div class="container">
    <div class="content">
      <p>
        Way more content than in all the others because this one has so much to say and doesn't know when to stop...it always does that...
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 2
      </p>
    </div>
  </div>
  <div class="container">
    <div class="content">
      <p>
        Content 3
      </p>
      <p>
        Content 4
      </p>
    </div>
  </div>
</section>

https://jsfiddle.net/vy3Lzu75/7/