CODEWITHSUNDEEP
cssflexbox
cmp
cmp

Reputation: 452

Why are two of my boxes at different heights when using the same css class?

I can't see why my flexboxes are not all obeying the same padding-bottom rule. Only one class is applying the height through padding-bottom.

.col-t {
  width: 100%
}

.col-s {
  width: 50%
}

main#container .grid .grid-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

main#container .grid .grid-container .box {
  -webkit-flex: 1 auto;
  flex: 1 auto;
  position: relative;
}

main#container .grid .grid-container .box>div {
  padding-bottom: 56.66666%;
}

.r {
  background: red;
}

.b {
  background: blue
}

.p {
  background: purple
}
<main id="container">
  <section class="grid">
    <div class="col-s grid-container">
      <div class="col-t box">
        <div class="r">

        </div>
      </div>
      <div class="col-s box">
        <div class="b">

        </div>
      </div>
      <div class="col-s box">
        <div class="p">

        </div>
      </div>
    </div>
  </section>
</main>

Is it because the height through padding-top and bottom is relative to the width? But if this is the case, how would it be possible to make all of the boxes the same height using percentages?

Upvotes: 0

Views: 37

Answers (1)

Asons
Asons

Reputation: 87191

Is it because the height through padding-top and bottom is relative to the width?

Yes

But if this is the case, how would it be possible to make all of the boxes the same height using percentages?

Since the col-s box element is only half the width of the col-t box, you need to double its childrens padding's percent, padding-bottom: calc(2 * 56.66666%); to make them have the same height as the col-t box's child has.

Stack snippet

.col-t {
  width: 100%
}

.col-s {
  width: 50%
}

main#container .grid .grid-container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}

main#container .grid .grid-container .box {
  -webkit-flex: 1 auto;
  flex: 1 auto;
  position: relative;
}

main#container .grid .grid-container .box>div {
  padding-bottom: 56.66666%;
}

main#container .grid .grid-container .col-s.box>div {
  padding-bottom: calc(2 * 56.66666%);                     /*  added  */
}

.r {
  background: red;
}

.b {
  background: blue
}

.p {
  background: purple
}
<main id="container">
  <section class="grid">
    <div class="col-s grid-container">
      <div class="col-t box">
        <div class="r">

        </div>
      </div>
      <div class="col-s box">
        <div class="b">

        </div>
      </div>
      <div class="col-s box">
        <div class="p">

        </div>
      </div>
    </div>
  </section>
</main>

Upvotes: 1

Related Questions