Kevin Powell - Community•2y ago

Make a div height fit contet

Hello, can someone tell what to do to make any of my div with cards scaleable with items in him? https://codepen.io/artusss0/pen/jOQEVmq

30 Replies

WebMechanic•2y ago

you've added a fixed height, that's why

.bottom {
  min-height: 30vh;
  display: flex;
  align-items: start;
}

.bottom {
  min-height: 30vh;
  display: flex;
  align-items: start;
}

you're probably better off using Grid for the "bottom" (aka main content area) rather than flexbox.

artusOP•2y ago

then every of div inside will have same height?

WebMechanic•2y ago

I guess so:

.bottom {
    min-height: 30vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.bottom {
    min-height: 30vh;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

avoid using a reset for all margins on everything. you end app adding them back all over again and working with DIVs and SECTION and such this setting is futile: none of them have margins or paddings by default.

* {
  margin: *;
  padding: *;
}

* {
  margin: *;
  padding: *;
}

artusOP•2y ago

what does that mean repeat(4, 1fr)

WebMechanic•2y ago

it will create for equal columns using the available space

artusOP•2y ago

oh didnt know that, i saw that somewhere so i was sure its good

WebMechanic•2y ago

pleas consult MDN for CSS properties

artusOP•2y ago

im reading it now

WebMechanic•2y ago

look up Rachel Andrews on YT. She has excellent content on Grid with many short and useful samples.

artusOP•2y ago

https://codepen.io/artusss0/pen/jOQEVmq is it possible to make their height fit to items?

WebMechanic•2y ago

so the blue yellow and green don't stretch down? yes with align-self. your html nesting appears to be messed up, there are .items outside of .cards also cleanup those inline styles as already suggested yesterday and have all your styles in the style sheet only. and use one class name for these card item wrappers to control their layout, paddings and white space, and their individual names for the coloring only.

artusOP•2y ago

I will do it in a moment and add it to codepen every item is inside of right card so i dont know why all cards are same height. and i cleared html so there is no css in it and added same names to card classes https://codepen.io/artusss0/pen/jOQEVmq can u tell me why their height is same?

WebMechanic•2y ago

you've given them a height of 100% also add this to .bottom align-items: start;

artusOP•2y ago

love u bro <33

WebMechanic•2y ago

you can simplify the whole bit. Grid takes care of all the sizing, so less is often more

.bottom {
  min-height: 30vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: start;
  padding-top: 10px;
}
.section {
  display: flex;
  width: 100%;
  flex-direction: column;
}

.bottom {
  min-height: 30vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: start;
  padding-top: 10px;
}
.section {
  display: flex;
  width: 100%;
  flex-direction: column;
}

change 1rem to 10px to match the other gutters

artusOP•2y ago

so in .section i added so much unnecessary code that were a default in css, like adding display: block; to div that i created?

artusOP•2y ago

is there any way to fix this?

WebMechanic•2y ago

yes. div is a block elements by default just like span is inline. The initial styles of each en every HTML element is documented on MDN. The only property you might want to always reset in * is box-sizing: border-box. All the other stuff was needed +15 years ago when browser did all sort of crap and we had to deal with Internet Explorer. Browsers are pretty consistent these days and follow standards. MDN will tell you what to expect from any HTML element. display also has no effect on Grid items or Flex items on how they interact or flow with their siblings. They essentially all become blocks when the grid and flex layout algorithms of their parent element takes over and controls their sizing and positioning within the grid/flexbox.

artusOP•2y ago

on left side its normal

WebMechanic•2y ago

can you be more specific what to be fixed?

artusOP•2y ago

its to big 1 or 2px okay ill add this to my code and read mdn about it

WebMechanic•2y ago

remove all extra margins for the elements inside the grid and flexbox. they'll cause overflow. avoid absolute values and percentages to size these items. Both grid and Flexbox will do their magic to use the available space. if you must, use max-width in favour of width to restrict sizes

artusOP•2y ago

.section {
    display: flex;
    width: 100%;
    height: fit-content;
    flex-direction: column;
    height: fit-content;
    margin: 2px;
    background-color: chocolate;
    margin-top: 10px;
}

.section {
    display: flex;
    width: 100%;
    height: fit-content;
    flex-direction: column;
    height: fit-content;
    margin: 2px;
    background-color: chocolate;
    margin-top: 10px;
}

sus margin: 2px idk how did it get there

WebMechanic•2y ago

it's been there all along, which is why I removed it. same for the widht and height stuff. for a gird item all of this not needed. see the version I posted earlier

artusOP•2y ago

i was sure i deleted it, didnt copy code cause i need to remember it and most importantly understand it unfortunately, this is what the beginnings with css look like :((

WebMechanic•2y ago

😂 I know

artusOP•2y ago

thanks for all your help today, u are amazing

WebMechanic•2y ago

you're welcome. Have fun and check our Rachel's videos. They'll be of great help to learn grid. And of course all of @Kevin's excessive work on these subjects 🙂

artusOP•2y ago

When I started watching it, I decided that I would rather not use it, now I know that it was a mistake Thank you again, I hope I will find such good help here in other situations as well

Gaming

Programming

Make a div height fit contet