Estoy tratando de colocar dos elementos (.child1 y .child3) uno al lado del otro y hacer que tengan la misma altura. Estoy usando flex y height: 100% para esto. Sin embargo, esto empuja los elementos hermanos (.child2 y .child4) ...

0
Extect 4 mar. 2021 a las 11:29

1 respuesta

La mejor respuesta

Elimine flex-wrap: wrap y reemplácelo con flex-direction: column; en su elemento .parent. Luego, elimine height de .child1 y .child3.

.container {
  display: flex;
}
.parent {
  background: blue;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.child1, .child3 {
  background: red;
  width: 100%;
}
.child2, .child4 {
  background: yellow;
  height: 50px;
}
<div class="container">
  <div class="parent">
    <div class="child1">Child 1 should have same height as Child 3</div>
    <div class="child2">Child 2 pushed out of parent. Has a fixed height.</div>
  </div>
  <div class="parent">
    <div class="child3">Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. </div>
    <div class="child4">Child 4 pushed out of parent. Has a fixed height.</div>
  </div>
</div>

Editar:

Si no le sirve, entonces también tiene que cambiar HTML

.container {
  display: flex;
  flex-wrap: wrap;
  background: blue;
  padding: 1rem;
  justify-content: space-between;
}

div[class^="child"]{
  flex: 0 0 Calc(50% - 10px);
}

.child1, .child3 {
  background: red;
}

.child2, .child4 {
  background: yellow;
  height: 50px;
}

.divider {
  width: 100%;
  flex: 0 0 100%;
}
<div class="container">
  <div class="child1">Child 1 should have same height as Child 3</div>
  <div class="child3">Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. Child 3 should have same height as Child 1, even when one of the two has more content in it than the other. </div>
        
  <div class="divider"></div>
        
  <div class="child2">Child 2 pushed out of parent. Has a fixed height.</div>
  <div class="child4">Child 4 pushed out of parent. Has a fixed height.</div>
</div>
0
ciekals11 4 mar. 2021 a las 09:02