CODEWITHSUNDEEP
htmlcss
Greavox
Greavox

Reputation: 13

Height adaptive container

I looked on my case (float / clearfix, relative parent / absolute child) but I did not find any reflection on the following problem:

There are three <div 2> in a flexible environment which have the same height (thanks to the flex), each of these contains three elements (<div 3> + <p> + <a>), the <p> has a margin above and below and the latter is rather large in order to be able to leave room for the <a> which is in absolute position attached to the bottom of the <div 2> parent.

Here is the example (On Jsfiddle): 

#accueilBloc2 {
  background-color: #FFF;
  text-align: center;
}

#accueilBloc2>div {
  max-width: 1200px;
  width: 100%;
  display: inline-block;
  padding: 8rem 0 12rem;
}

#accueilBloc2>div>div {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#accueilBloc2>div>div>div {
  box-sizing: border-box;
  width: 33.33333333%;
  padding: 1rem;
}

#accueilBloc2>div>div>div>div {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
}

#accueilBloc2>div>div>div>div>div.icon {
  position: relative;
  z-index: 10;
  padding: 0.5rem;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-bottom: -50px;
}

#accueilBloc2>div>div>div>div>div.bloc {
  padding: 6rem 3rem 3rem;
  box-sizing: border-box;
  background-color: #F6F6F6;
  flex-grow: 1;
  width: 100%;
  border: 1px solid #919191;
  padding: 6rem 3rem 3rem;
}

#accueilBloc2>div>div>div>div>div.bloc>div {
  position: relative;
  height: 100%;
}

#accueilBloc2 div.titre {
  font-family: Quicksand, sans-serif;
  font-size: 1.6rem;
  line-height: 2rem;
}

#accueilBloc2 p {
  font-family: Quicksand, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin: 2rem 0 8rem;
}

#accueilBloc2 a {
  font-size: 1.3rem;
  text-transform: uppercase;
  background-color: #FFF;
  display: block;
  border: 1px solid #111;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: Quicksand, sans-serif;
}

#accueilBloc2 a:hover,
#accueilBloc2 a:focus {
  text-decoration: none;
  color: #FFF;
}

#accueilBloc2_01 div.icon {
  background-color: #9b9b37;
}

#accueilBloc2_02 div.icon {
  background-color: #e7ac36;
}

#accueilBloc2_03 div.icon {
  background-color: #c2131a;
}

#accueilBloc2_01 div.titre {
  color: #9b9b37;
}

#accueilBloc2_02 div.titre {
  color: #e7ac36;
}

#accueilBloc2_03 div.titre {
  color: #c2131a;
}

#accueilBloc2_01 a {
  color: #9b9b37;
  border-color: #9b9b37;
}

#accueilBloc2_01 a:hover,
#accueilBloc2_01 a:focus {
  background-color: #9b9b37;
}

#accueilBloc2_02 a {
  color: #e7ac36;
  border-color: #e7ac36;
}

#accueilBloc2_02 a:hover,
#accueilBloc2_02 a:focus {
  background-color: #e7ac36;
}

#accueilBloc2_03 a {
  color: #c2131a;
  border-color: #c2131a;
}

#accueilBloc2_03 a:hover,
#accueilBloc2_03 a:focus {
  background-color: #c2131a;
}
<!DOCTYPE html>
<html dir="ltr" lang="fr" prefix="og: http://ogp.me/ns#">

<head>
  <title>Test Flexbox</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="accueilBloc2">
    <div>
      <div>
        <div id="accueilBloc2_02">
          <div>
            <div class="icon"><img alt="Icône" src="accueilBloc2_02.svg" /></div>
            <div class="bloc">
              <div>
                <div class="titre">Lorem ipsum</div>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <a href="#">Lorem ipsum</a>
              </div>
            </div>
          </div>
        </div>
        <div id="accueilBloc2_01">
          <div>
            <div class="icon"><img alt="Icône" src="accueilBloc2_01.svg" /></div>
            <div class="bloc">
              <div>
                <div class="titre">Duis aute irure</div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <a href="#">Lorem ipsum</a>
              </div>
            </div>
          </div>
        </div>
        <div id="accueilBloc2_03">
          <div>
            <div class="icon"><img alt="Icône" src="accueilBloc2_03.svg" /></div>
            <div class="bloc">
              <div>
                <div class="titre">Excepteur sint</div>
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <a href="#">Lorem ipsum</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

The concern encountered is that the element <p> being the largest, its direct <div 2> parent does not take the height of the parent <div 3>; and only on Firefox, IE 11 and Microsoft Edge (the Old). However, just by opening the browser console on Firefox and pulling down the <div 1> or <div 2>, the problem disappears.

What is surprising is that on previous versions of Firefox I do not remember having encountered this kind of problem.

Do you have an idea ?

Thank you for your attention!

(Sorry for my English, you have the right to correct my writing)

Upvotes: 1

Views: 169

Answers (1)

Aymen TAGHLISSIA
Aymen TAGHLISSIA

Reputation: 1925

i just solved the problem , the problem is in your bloc display , you didn't mention how the contents should be displayed , just add this to #accueilBloc2>div>div>div>div>div.bloc : 

  display: flex;
  flex-direction:column;
  justify-content:space-between;
  height:100% !important;

so it will be like this : enter image description here

the updated css file : 

#accueilBloc2 {
  background-color: #FFF;
  text-align: center;
}

#accueilBloc2>div {
  max-width: 1200px;
  width: 100%;
  display: inline-block;
  padding: 8rem 0 12rem;
}

#accueilBloc2>div>div {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#accueilBloc2>div>div>div {
  box-sizing: border-box;
  width: 33.33333333%;
  padding: 1rem;
}

#accueilBloc2>div>div>div>div {
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
}

#accueilBloc2>div>div>div>div>div.icon {
  position: relative;
  z-index: 10;
  padding: 0.5rem;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin-bottom: -50px;
}

#accueilBloc2>div>div>div>div>div.bloc {
  padding: 6rem 3rem 3rem;
  box-sizing: border-box;
  background-color: #F6F6F6;
  width: 100%;
  height:100% !important;
  border: 1px solid #919191;
  padding: 6rem 3rem 3rem;
  display: flex;
  flex-direction:column;
  justify-content:space-between;
    height:100% !important;
}

#accueilBloc2>div>div>div>div>div.bloc>div {
  position: relative;
  height: 100%;
}

#accueilBloc2 div.titre {
  font-family: Quicksand, sans-serif;
  font-size: 1.6rem;
  line-height: 2rem;
}

#accueilBloc2 p {
  font-family: Quicksand, sans-serif;
  font-size: 1.2rem;
  line-height: 1.6rem;
  margin: 2rem 0 8rem;
}

#accueilBloc2 a {
  font-size: 1.3rem;
  text-transform: uppercase;
  background-color: #FFF;
  display: block;
  border: 1px solid #111;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-family: Quicksand, sans-serif;
}

#accueilBloc2 a:hover,
#accueilBloc2 a:focus {
  text-decoration: none;
  color: #FFF;
}

#accueilBloc2_01 div.icon {
  background-color: #9b9b37;
}

#accueilBloc2_02 div.icon {
  background-color: #e7ac36;
}

#accueilBloc2_03 div.icon {
  background-color: #c2131a;
}

#accueilBloc2_01 div.titre {
  color: #9b9b37;
}

#accueilBloc2_02 div.titre {
  color: #e7ac36;
}

#accueilBloc2_03 div.titre {
  color: #c2131a;
}

#accueilBloc2_01 a {
  color: #9b9b37;
  border-color: #9b9b37;
}

#accueilBloc2_01 a:hover,
#accueilBloc2_01 a:focus {
  background-color: #9b9b37;
}

#accueilBloc2_02 a {
  color: #e7ac36;
  border-color: #e7ac36;
}

#accueilBloc2_02 a:hover,
#accueilBloc2_02 a:focus {
  background-color: #e7ac36;
}

#accueilBloc2_03 a {
  color: #c2131a;
  border-color: #c2131a;
}

#accueilBloc2_03 a:hover,
#accueilBloc2_03 a:focus {
  background-color: #c2131a;
}

Upvotes: 1

Related Questions