1

I am using flexbox to create a responsive table. I'd like to achieve the following layout:

Mobile:

X | 1 | 2 |
A |   |   |
B |   |   |
C |   |   |

Desktop:

 X | A | B | C |
 1 |   |   |   |
 2 |   |   |   |

To this end I have created multiple flexboxes, one as a parent to the entire business and one for each row on the mobile layout.

I have then used breakpoints and flex-direction: row/column, which appears to work pretty well save for one issue:

On the Desktop variant, the X | 1 | 2 column (see style tickets__row) does not stretch to the full height of the parent. This is not what I expected, since align-items: stretch is the default property (plus assigning it has no effect).

How can I solve this? Demo code:

* {
   box-sizing: border-box;
  }

  .tickets__table {
   display: flex;
   flex-direction: column;
  }

  .tickets__row {
   display: flex;
   flex: 1 1 auto;
   flex-direction: row;
  }

  .tickets__cell {
   width: 33%;
  }

  .tickets-label {
   border: 1px solid rebeccapurple;
  }

  .tickets-content {
   border: 1px solid aqua;
  }

  @media all and (min-width:600px) {
   .tickets__table {
    flex-direction: row;
   }

   .tickets__row {
    flex-direction: column;
   }

   .tickets__cell {
    width: 100%;
   }
  }
<div class="tickets__table">

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      &nbsp;
    </div>
    <div class="tickets__cell tickets-label">
      Price 1
    </div>
    <div class="tickets__cell tickets-label">
      Price 2
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket A
    </div>
    <div class="tickets__cell tickets-content">
      $495<br />
      <s>$595</s>
    </div>
    <div class="tickets__cell tickets-content">
      $595<br />
      <s>$695</s>
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket B
    </div>
    <div class="tickets__cell tickets-content">
      $545<br />
      <s>$655</s>
    </div>
    <div class="tickets__cell tickets-content">
      $655<br />
      <s>$765</s>
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket C
    </div>
    <div class="tickets__cell tickets-content">
      $425<br />
      <s>$505</s>
    </div>
    <div class="tickets__cell tickets-content">
      $505<br />
      <s>$590</s>
    </div>
  </div>

</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Frish
  • 1,371
  • 10
  • 20

1 Answers1

1

You simply need to adjust flex-grow like this:

.tickets__cell:not(:first-child) {
    flex-grow:1;
}

Full code:

* {
  box-sizing: border-box;
}

.tickets__table {
  display: flex;
  flex-direction: column;
}

.tickets__row {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
}

.tickets__cell {
  width: 33%;
}

.tickets-label {
  border: 1px solid rebeccapurple;
}

.tickets-content {
  border: 1px solid aqua;
}

@media all and (min-width:600px) {
  .tickets__table {
    flex-direction: row;
  }
  .tickets__cell:not(:first-child) {
    flex-grow: 1;
  }
  .tickets__row {
    flex-direction: column;
  }
  .tickets__cell {
    width: 100%;
  }
}
<div class="tickets__table">

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      &nbsp;
    </div>
    <div class="tickets__cell tickets-label">
      Price 1
    </div>
    <div class="tickets__cell tickets-label">
      Price 2
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket A
    </div>
    <div class="tickets__cell tickets-content">
      $495<br />
      <s>$595</s>
    </div>
    <div class="tickets__cell tickets-content">
      $595<br />
      <s>$695</s>
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket B
    </div>
    <div class="tickets__cell tickets-content">
      $545<br />
      <s>$655</s>
    </div>
    <div class="tickets__cell tickets-content">
      $655<br />
      <s>$765</s>
    </div>
  </div>

  <div class="tickets__row">
    <div class="tickets__cell tickets-label">
      Ticket C
    </div>
    <div class="tickets__cell tickets-content">
      $425<br />
      <s>$505</s>
    </div>
    <div class="tickets__cell tickets-content">
      $505<br />
      <s>$590</s>
    </div>
  </div>

</div>

As as side note the default value of justify-content is flex-startref and there is no stretch value for it. We have the flex-grow propety to deal with spacing on main axis. stretch is only available for align-items that control the cross axis.

The MDN page (https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) is somehow missleading because we ca find stretch as a potential value for justify-content which is correct but there is a missing information that we can only find in the specification of a working draft:

The justify-content property applies along the main axis, but since stretching in the main axis is controlled by flex, stretch behaves as flex-start.

So using stretch value within a flexbox container will fallback to flex-start

Temani Afif
  • 245,468
  • 26
  • 309
  • 415