Разделы равной высоты в столбцах flexbox?

Question

Я использую столбцы flexbox для довольно простой компоновки.Ниже есть заголовок, изображение и список.Список должен иметь рамку и может иметь различное содержимое.Возможно ли, чтобы эти разделы списка имели одинаковую высоту на основе самых больших без JavaScript?Или нужно рассчитать самую большую высоту сечения с помощью JS и применить ее к другим?

Это то, что я хочу:

Вот что у меня есть:

.columns {
  display: flex;
}

.col {
  margin-left: 20px;
}

ul {
  margin: 0; 
}

.list {
  padding: 24px;
  border: 1px solid blue;
}

<div class="columns">

  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>

</div>

Answer 1

Вы должны установить .col как flex тоже

.col{ display:flex; }

и столбцы вашего класса лучше называть строкой

Answer 2

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

.columns {
  display: flex;
}

.col {  
  display: flex;          /* new */
  flex-direction: column; /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

Вот еще несколько примеров:

jsFiddle demo

.columns {
  display: flex;
}

.col {
  display: flex;           /* new */
  flex-direction: column;  /* new */
  margin-left: 20px;
}

.list {
  flex: 1;                 /* new */
  padding: 24px;
  border: 1px solid blue;
}

ul {
  margin: 0;
}

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>

<br>

<div class="columns">
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>
        <li>List item</li>        
      </ul>
    </div>
  </div>
  <div class="col">
    <h3>Header</h3>
    <div class="list">
      <ul>
        <li>List item</li>
        <li>List item</li>
      </ul>
    </div>
  </div>
</div>