Kevin Powell - Community•7mo 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θ•7mo 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•7mo 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•7mo ago

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

Q “C_Q” C

CodePen

MWZNxdx

...

C_7•7mo 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