Kevin Powell - Community•13mo ago

Vertical squishing of elements even with overflow-y: scroll

The container where my elements sit has the property overflow-y set to scroll, but even with that, when I add more elements in it, they get squished vertically a bit. How come?

root.css

root.html

4 Replies

imTypθOP•13mo ago

I posted the images in the wrong order but yeah, you can see that in the right image, the space under dute date has a certain height, which gets reduced in the left picture when I add elements

C_7•13mo ago

.mainContainer > * {
  width: 25.5vw;

  background: var(--main-color);

  margin: 0.5vw;
  padding: 0.5vw;

  border-radius: 0.25vw;

  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* Key issues */

  display: grid;

  gap: 3vh;

  overflow-y: scroll;
}


.mainContainer > * > .listElement {
  position: relative;
  background: #fff;
  width: 90%;
  height: 20vh;

  background: var(--bar-color);

  border-radius: 0.25vw;
  padding: 0.5vw;

  display: grid;

  grid-template-areas:
    'name name'
    'desc desc'
    'text date';
  /* grid-template-rows: 25% 60% 15%; */
  /* Key issues */
  grid-template-columns: 50% 50%;
  grid-row-gap: 0.5vh;
}

.mainContainer > * {
  width: 25.5vw;

  background: var(--main-color);

  margin: 0.5vw;
  padding: 0.5vw;

  border-radius: 0.25vw;

  /* display: flex; */
  /* flex-direction: column; */
  /* align-items: center; */
  /* Key issues */

  display: grid;

  gap: 3vh;

  overflow-y: scroll;
}


.mainContainer > * > .listElement {
  position: relative;
  background: #fff;
  width: 90%;
  height: 20vh;

  background: var(--bar-color);

  border-radius: 0.25vw;
  padding: 0.5vw;

  display: grid;

  grid-template-areas:
    'name name'
    'desc desc'
    'text date';
  /* grid-template-rows: 25% 60% 15%; */
  /* Key issues */
  grid-template-columns: 50% 50%;
  grid-row-gap: 0.5vh;
}

C_7•13mo ago

https://codepen.io/Q-C_Q-C/pen/MWZNxdx

Q “C_Q” C

CodePen

MWZNxdx

...

C_7•13mo ago

Your code looks like a layout exercise. There seems to be a lot of unnecessary padding, margin, width, and height. When you make grid constraints, you should consider whether it is necessary to declare the dimensions of the elements. Although it looks okay, there are still many problems inside

Gaming

Programming

Vertical squishing of elements even with overflow-y: scroll