Equal height for rows of CSS Grid or Flexbox with non-infinite height

Question

Note that this answer works and explains why it works for infinite height CSS grid. In my case, the height is limited (which could be 100vh or due to flex-grow but it's not infinite).

Let's say I have a certain space for a grid (decided by a flex box which is the remaining space of whatever remaining of the screen). I want it to be divided into two equal rows. The top one should be an img with object-fit: scale-down that take up all 50% height and at most 100% width and the bottom row should be some random text. Problem is, when the img is bigger, it takes up additional space (see example below).

Is it possible to divide a CSS grid or flex box (or any kind of display) into two strictly equal rows?

body {
  height: 100vh;
  width: 500px;
  display: flex;
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  width: 100%;
  
  display: grid;
  grid-template-rows: 1fr 1fr;
  
  background-color: cornflowerblue;
  
  padding: 1rem;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.content {
  background-color: black;
  color: white;
}

<div class="grid">
  <img src="https://placehold.co/600x400" />
  <div class="content">Another content</div>
</div>

score 1 · Accepted Answer · edited Aug 19 '23 at 20:23

1

If you put the img inside a div and set the img position: absolute, the setting seems to work OK.

body {
  height: 100vh;
  width: 700px;
  display: flex;
  margin: 0;
  padding: 0;
}

.grid {
  height: 100%;
  width: 100%;
  
  display: grid;
  grid-template-rows: 1fr 1fr;
  
  background-color: cornflowerblue;
  
  padding: 1rem;
}

.grid > .img-container {
  position:relative;
  background:pink;
}

img {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

.content {
  background-color: black;
  color: white;
}

<div class="grid">
  <div class="img-container">
    <img src="https://placehold.co/600x400" />
  </div>
  <div class="content">Another content</div>
</div>

edited Aug 19 '23 at 20:23

Luke Vo

17,859
21
105
181

answered Aug 19 '23 at 19:56

A Haworth

30,908
4
11
14

That's one good workaround though IMO it's a bit hacky. But it works! And this approach works when the amount of rows is not known. – Luke Vo Aug 19 '23 at 20:13
1

Yes, always a bit uncomfortable if add to the DOM to get round a styling problem, but was the best I could come up with at the moment, and given my laptop has collapsed. – A Haworth Aug 19 '23 at 20:19

Alirahmon · Answer 2 · 2023-08-20T15:49:22.400

0

In this approach, I used a flexbox container with the class .flex to split a space into two equal rows. The top row holds an image with object-fit: scale-down, while the bottom row contains text. To prevent the image from affecting the row's height, I set flex-grow: 1 and a fixed height: 50% for the image. The text row's height is also set to 50% with flex-grow: 1. This layout maintains equal row heights even when the image is larger.

body {
  height: 100vh;
  width: 100%;
  display: flex;
  margin: 0;
  padding: 0;
  box-sizing: border-box; 
}

.flex {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: cornflowerblue;
  padding: 1rem;
  box-sizing: border-box; 
}

img {
  display: block;
  height: 50%;
  object-fit: scale-down;
  flex-grow: 1;
}

.content {
  height: 50%;
  background-color: black;
  color: white;
  flex-grow: 1;
}

<div class="flex">
  <img src="https://placehold.co/600x400" />
  <div class="content">Another content</div>
</div>

edited Aug 20 '23 at 15:49

answered Aug 19 '23 at 04:23

Alirahmon

50
4

4

hi, explaining your answers in a bit more detail (even through code comments) can help OP and other users figure out what went wrong and learn from their mistakes – corn on the cob Aug 19 '23 at 08:41
Interesting, I didn't think about setting it to 50%. However in your example, it's not correct. If you inspect the result, the two elements don't have the same height. EDIT: removing `gap` would work though I don't know why. – Luke Vo Aug 19 '23 at 15:30
Eliminating the `gap` would result in an unappealing appearance. I introduced a `20px` `gap` to enhance its visual appeal slightly. If this doesn't suit your preferences, I can remove the `gap` as per your preference. – Alirahmon Aug 20 '23 at 15:55

Equal height for rows of CSS Grid or Flexbox with non-infinite height

2 Answers2