Сделайте так, чтобы у детей гибкого div был одинаковый рост (для каждого ряда)

Question

У меня есть flex div (.parent) с дочерними div-ами (как вы уже догадались, .child), который оборачивается в несколько строк.Моя проблема в том, что я не могу получить границу каждого div .card одинаковой высоты, не разрушая мою "сетку".Когда я пытаюсь указать конкретную высоту для .child и т. Д., Высоты выглядят ужасно, потому что не все строки имеют одинаковую длину содержимого.Я видел примеры этого, но не уверен, как справиться с этим с помощью flex, чтобы несколько строк имели одинаковую высоту (при этом каждая отдельная «ячейка» не имела одинаковую высоту и создавала столько же беспорядка.

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.child {
  height: 100%;
  margin-top: 20px;
  margin: 1%;
  display: inline-flex;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}

<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>

Попытка избежать происходящего здесь (пример текущего кода): https://jsfiddle.net/4gy7fzw1/

Пример кода без заданных высот: https://jsfiddle.net/t2yzfkm9/

Answer 1

ширина и высота не работают с flex, используйте свойство "flex", чтобы задать / установить ширину элементов.

Я обновил ваш CSS для классов "child" и "parent", чтобы сделать всекарты одинаковые по высоте.

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
 
}

.child {
  margin: 1%;
  display: flex;
  align-items: stretch;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}

<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>

Answer 2

Как правило, чтобы каждый столбец в макете flexbox имел одинаковую высоту, все, что вам нужно сделать, это указать display: flex в родительском элементе (.parent).В вашей конкретной ситуации вы устанавливаете height: 100% для дочернего элемента (.child).

В flexbox height: 100% фактически делает против того, что вы можете ожидать,из-за процентных значений, основанных на высоте содержащего блока.height: auto позволит элементу расширяться (и используется по умолчанию).

Короче говоря, чтобы ваши столбцы имели одинаковую высоту, просто уберите height: 100% из .child:

.parent {
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 100%;
  width: 100%;
}

.child {
  /*height: 100%;*/
  margin-top: 20px;
  margin: 1%;
  display: inline-flex;
}

.a-title {
  font-size: 1.3em;
  font-weight: 700;
  width: 100%;
}

.child .card {
  border-radius: 3px;
  border: 1px solid;
  font-size: .8em;
  padding: 10px;
  display: inline-block;
  overflow: hidden;
  /* height: 600px; */
}

<div class="parent">
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>

      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
  <div class="child">
    <div class="card">

      <img src="https://i.imgur.com/D1p6UX3.jpg" width="240" height="240"><br>
      <p class="a-title">
        Title
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        Some example text that I'm too lazy to ipsum right now.
      </p>
      <p>
        <a href="#">Some fake link</a>
      </p>
    </div>
  </div>
</div>