How to specify height in flex container?

Question

I have a flex wrap container. On smaller screens I show 5 columns and on larger screens I show 10 columns. How do I specify the height of the rows so that the text containers are square in both cases instead of the intrinsic height of the text? I'm hoping to keep the sizing dynamic so when the window is resized, the squares fill out the rows.

https://codesandbox.io/s/fragrant-bird-gzvht?fontsize=14

More like this:

Instead of this:

possible duplicate of https://stackoverflow.com/questions/29307971/css-grid-of-squares-with-flexbox/29308467 — G-Cyrillus, Aug 29 '19 at 20:24

score 3 · Answer 1 · answered Aug 29 '19 at 20:27

Give each card a fixed height and a fixed width

[theme.breakpoints.up("sm")]: {
  backgroundColor: theme.palette.secondary.main,
  flexBasis: "9.5%",
  height: 60,
  width: 60,
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  margin: 5
}

G-Cyrillus · Accepted Answer · 2019-08-29T20:41:22.143

You may use the padding or margin with a vertical value in percentage , so it can use the width as reference . a mediaquerie to set a break point to turn rows of ten into 5 will do

example down here or a codepen to play with https://codepen.io/gc-nomade/pen/dybRaZp

.flex-container {
  background: rgb(63, 81, 181);
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  counter-reset: items
}

.flex-item {
  background: tomato;
  margin: 5px;
  color: white;
  font-weight: bold;
  font-size: 2vw;
  text-align: center;
  max-width: calc(10% - 10px);
  flex: 1 0 calc(10% - 10px);
  
  /* can be a flex container too */
  
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-item:before {/* stretch it to be a square */
  content: '';
  float: left;/* if not a flex child*/
  padding-top: 100%;
}

.flex-item:after {
  counter-increment: items;
  content: counter(items)
}

@media screen and (max-width:800px) {
  .flex-item {
    max-width: calc(20% - 10px);
    flex: 1 0 calc(20% - 10px);
  }
}

<p>play me full page </p>
<div class="flex-container">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

How to specify height in flex container?

2 Answers2