Why height property does not work on this div?-CodePudding

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 >
    <h2>content</h2>
  </div>
  <div >
    <h2>content</h2>
  </div>
  <div >
    <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.

CodePudding user response：

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 >
    <h2>content</h2>
  </div>
  <div >
    <h2>content</h2>
  </div>
  <div >
    <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 >
    <h2>content</h2>
  </div>
  <div >
    <h2>content</h2>
  </div>
  <div >
    <h2>content</h2>
  </div>
</body>

CodePudding user response：

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 e.g 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 >
    <h2>content</h2>
  </div>
  <div >
    <h2>content</h2>
  </div>
  <div >
    <h2>content</h2>
  </div>
</body>

CodePudding user response：

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%;

CodePudding user response：

Try adding flex-shrink to .box

flex-shrink: 0;