positionner deux éléments à l'intérieur d'un parent pour avoir la même hauteur

Question

J'ai 2 divs que je dois positionner à l'intérieur du conteneur div ils doivent être à la fois la même hauteur, peu importe le contenu de l'un d'entre eux, ils doivent donc prendre la hauteur de la plus grande d'où les absolus et le haut du bas mis à , actuellement le conteneur div#three s'effondre et cache le contenu div diviseurs deux.

section#three { 
 
    width: 100%; 
 
    max-width: 1050px; 
 
    margin: 0 auto; 
 
    padding: 70px 0px 70px 0px; 
 
    position: relative; 
 
} 
 

 
section#three div.thumb-container { 
 
    width: 40%; 
 
    top: 0; 
 
    bottom: 0; 
 
    position: absolute; 
 
    clear: both; 
 
} 
 

 
section#three div#left-thumb-container { 
 
    left: 5%; 
 
} 
 

 
section#three div#right-thumb-container { 
 
    right: 5%; 
 
}

<section id="three"> 
 
    <div class="thumb-container" id="left-thumb-container"> 
 
     content will be here to expand the divs 
 
    </div> 
 

 
    <div class="thumb-container" id="right-thumb-container"> 
 
     content will be here to expand the divs 
 
    </div> 
 
</section>

Answer 1

Je recommande d'utiliser FlexBox pour résoudre ce problème. https://codepen.io/imohkay/pen/gpard Vous pouvez voir l'exemple ici.

#three { 
 
    display: flex; 
 
} 
 

 
.thumb-container { 
 
    background: gray; 
 
    border-left: 1px solid #fff; 
 
    flex: 1 0; 
 
    padding: 30px; 
 
}

<section id="three"> 
 
    <div class="thumb-container" id="left-thumb-container"> 
 
     content will be here to expand the divs 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente beatae nulla earum error reiciendis molestias praesentium, doloribus esse provident harum illum, voluptate vero ratione unde fugit repellendus laboriosam ad officiis.</p> 
 
    </div> 
 

 
    <div class="thumb-container" id="right-thumb-container"> 
 
     content will be here to expand the divs 
 
    </div> 
 
</section>