Why height property does not work on this div?
Question
I am writing a website with HTML and CSS. I just want a lot of div side by side.
This is my code
body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; height: 100vh; display: flex; flex-direction: column; align-items: center; background-color: #f6f6f6; } h1 { margin: 10px; }.box { color: #fff; background-color: steelblue; height: 2000px; width: 300px; padding: 20px; display: flex; align-items: center; justify-content: center; margin: 20px; border-radius: 10px; font-size: 20px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); }
<body> <h1>Scroll Animation</h1> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> </body>
when I change the height of box class, it does not work, but when I change the width property, it works. I change the flex-direction , the height property also does not work.
What is the problem? How can I get the height which I want? Please help me with this. Thanks a lot.
3 answers
solution1
3 2022-09-22 08:09:02
You set the body element to display: flex and height: 100vh so the boxes are laid out using flex layout within a constrained height.
By default, flex-shrink is 1 so they shrink to fit.
You need to change the shrink rule to 0 if you want the height you specified for the boxes to take priority over the space available for them.
body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; height: 100vh; display: flex; flex-direction: column; align-items: center; background-color: #f6f6f6; } h1 { margin: 10px; }.box { flex-shrink: 0; color: #fff; background-color: steelblue; height: 2000px; width: 300px; padding: 20px; display: flex; align-items: center; justify-content: center; margin: 20px; border-radius: 10px; font-size: 20px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); }
<body> <h1>Scroll Animation</h1> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> </body>
… or remove the restriction on the body height so they don't need to shrink to fit the space you allocated for them.
body { min-height: 100vh; margin: 0; padding: 0; font-family: "Roboto", sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #f6f6f6; } h1 { margin: 10px; }.box { color: #fff; background-color: steelblue; height: 2000px; width: 300px; padding: 20px; display: flex; align-items: center; justify-content: center; margin: 20px; border-radius: 10px; font-size: 20px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); }
<body> <h1>Scroll Animation</h1> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> </body>
solution2
1 2022-09-22 08:09:20
When using flex-direction: row (default) , items will be aligned horizontally. To adjust horizontal space for items in this mode you should use flex-basis , flex-grow and flex-shrink eg flex:1; and use height in the normal manner,
When you are using flex-direction: column the items will be aligned vertically. When items are "rotated" vertically, flex-basis , flex-grow and flex-shrink will now affect the vertical space "height" and height property will now affect the horizontal space "width" of the items.
EXAMPLE
body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; height: 100vh; display: flex; flex-direction: column; align-items: center; background-color: #f6f6f6; } h1 { margin: 10px; }.box { display: flex; flex:0 0 200px; width: 300px; padding: 20px; color: #fff; background-color: steelblue; align-items: center; justify-content: center; margin: 20px; border-radius: 10px; font-size: 20px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); }
<body> <h1>Scroll Animation</h1> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> </body>
solution3
-1 2022-09-22 08:12:36
in the block, the height of the case is 100vh and due to the display flex limits the maximum height, removing it, you can increase the height arbitrarily. and generally better to write max-height: 2000px; height: 100%;
solution4
-1 2022-09-22 08:14:46
Try adding flex-shrink to.box
flex-shrink: 0;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.