Div are not with same height-CodePudding

I want to make all div with the same height. Actually I have this:

.box-global {
    display: inline-block;
    padding: 0;
}
@media (min-width: 640px){
    .box-global {
        width: 33%;
    }
}
@media (max-width: 640px){
    .box-global {
        width: 50%;
    }
}
.box {
    margin: 5px;
}

.text-center {
    justify-content: center;
    text-align: center;
    align-items: center;
}

.box {
    padding: 1.5rem;
    border-radius: 15px;
}

.box-p {
    padding: 2rem;
    margin: 0;
    color: white;
}

.bg-color {
    background-color: #1F2937;
}

.bg-dark {
    background-color: #151F2D;
}

h1, h2 {
    color: white;
    font-size: 2rem;
}

h4 {
    color: white;
    font-size: 1.4rem;
    margin: 0;
}

<body >
  <div  style="display: inline-block;justify-content: space-between;">
    <div >
      <div >
        <h4>Header 1</h4>
        <p >
          when an unknown printer took a gal
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 2</h4>
        <p >
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 3</h4>
        <p >
          when an unknown printer took a galley of type
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 4</h4>
        <p >
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 5</h4>
        <p >
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 6</h4>
        <p >
          when an unknown printer took a galley of type
        </p>
      </div>
    </div>
  </div>
</body>

When using min-height: 100%; and/or height: 100%; it doesn't work (nothing change)

CodePudding user response：

do you mean it like this ?

.text-center.full-width {
   display: grid;
   grid-template-columns: auto auto auto;
   align-items: stretch;
}

.box-global {
    display: inline-flex;
    padding: 0;
}

@media (min-width: 640px){
    .box-global {
        width: 100%;
        height: 100%;
        
    }
}
@media (max-width: 640px){
    .box-global {
        width: 50%;
        
    }
}
.box {
    margin: 5px;
}

.text-center {
    justify-content: center;
    text-align: center;
    align-items: center;
}

.box {
    padding: 1.5rem;
    border-radius: 15px;
}

.box-p {
    padding: 2rem;
    margin: 0;
    color: white;
}

.bg-color {
    background-color: #1F2937;
}

.bg-dark {
    background-color: #151F2D;
}

h1, h2 {
    color: white;
    font-size: 2rem;
}

h4 {
    color: white;
    font-size: 1.4rem;
    margin: 0;
}

<body >
  <div >
    <div >
      <div >
        <h4>Header 1</h4>
        <p >
          when an unknown printer took a gal
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 2</h4>
        <p >
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 3</h4>
        <p >
          when an unknown printer took a galley of type
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 4</h4>
        <p >
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 5</h4>
        <p >
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </p>
      </div>
    </div>
    <div >
      <div >
        <h4>Header 6</h4>
        <p >
          when an unknown printer took a galley of type
        </p>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

You have to make sure that your parent element has a height of 100% and only then you will be able to manipulate others height to their maximum. Also, you can't use justify-content when your display is set to inline-block (Only with display:flex);