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
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.
artus
artus•2y ago
then every of div inside will have same height?
WebMechanic
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: *;
}
artus
artus•2y ago
what does that mean repeat(4, 1fr)
WebMechanic
WebMechanic•2y ago
it will create for equal columns using the available space
artus
artus•2y ago
oh didnt know that, i saw that somewhere so i was sure its good
WebMechanic
WebMechanic•2y ago
pleas consult MDN for CSS properties
artus
artus•2y ago
im reading it now
WebMechanic
WebMechanic•2y ago
look up Rachel Andrews on YT. She has excellent content on Grid with many short and useful samples.
artus
artus•2y ago
https://codepen.io/artusss0/pen/jOQEVmq is it possible to make their height fit to items?
WebMechanic
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.
artus
artus•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
WebMechanic•2y ago
you've given them a height of 100% also add this to .bottom align-items: start;
artus
artus•2y ago
love u bro <33
WebMechanic
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
artus
artus•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?
artus
artus•2y ago
is there any way to fix this?
WebMechanic
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.
artus
artus•2y ago
on left side its normal
WebMechanic
WebMechanic•2y ago
can you be more specific what to be fixed?
artus
artus•2y ago
artus
artus•2y ago
its to big 1 or 2px okay ill add this to my code and read mdn about it
WebMechanic
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
artus
artus•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
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
artus
artus•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
WebMechanic•2y ago
😂 I know
artus
artus•2y ago
thanks for all your help today, u are amazing
WebMechanic
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 🙂
artus
artus•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
Want results from more Discord servers?
Add your server