Why div's height is 0 even though I have manually set it to be 34.4rem?

Question

I'm trying to improve my css and html skills as a new frontend developer by mimicking canva. Here is my code:

.content {
  height: calc(100vh - 7.2rem);
  overflow: scroll;
  flex: 0 1 80%;
  align-self: stretch;
  background-color: #00DBDE;
  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
  display: flex;
  flex-direction: column;
}

.search-field {
  position: relative;
  z-index: 1;
  width: 99%;
  // width: 99rem;
  height: 34.4rem;
  border-radius: .8rem;
  margin: 3rem auto;
  overflow: hidden;
  &__bg {
    width: 100%;
    height: calc(100% + 30vh);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background-image: url(https://banner-static.canva.com/images/c4878dcc-0e7e-453f-adee-4c60971feb3d_20200523-DeskSpaceMint-Global-Desktop-2x.jpg);
    background-size: cover;
    background-position: 50%;
  }
  &__front {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    //test
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  &__heading {
    font-size: 4.8rem;
    font-weight: 700;
  }
  &__input {}
  &__link {
    display: block;
  }
}

<section class="content">
  <div class="search-field">
    <div class="search-field__bg"></div>
    <div class="search-field__front">
      <h2 class="search-field__heading">Design anything.</h2>
      <input type="search" class="search-field__input" placeholder='Try "Card"'>
      <svg class="navbar__icon-size-small">
          <use href="/img/svg/sprites.svg#icon-down-arrow"></use>
      </svg>
    </div>
  </div>
  <div class="test">
      list of items...
  </div>
</section>

The question is why does my div.search-field disappears even though I have manually set it's height to 34.4rem and width to 99%. I have checked the google chrome developer tools by finding that its computed height somehow becomes 0.

If you want a complete copy of my project, please see Codepen. You might note that there are some imgs and svgs missing because I don't know how to uploaded local imgs to Codepen. The website is hosted on Netlify. Much appreciated if you would spend some time on spotting these bugs.

Hi and welcome to StackOverflow. In order to make your question easier to read and therefore get answers faster, can you please remove all unnecessary code so there is only the relevant code left to reproduce your issue? — Thanh-Quy Nguyen, Aug 18 '20 at 06:06
You have a flex style and the search field is minimized to its minimum height of 0; if you add a min height: 3rem; it would become 3 rem. — Wolfgang, Aug 18 '20 at 06:08
It works! What makes it difference between height and min-height? — LittleTeemo, Aug 18 '20 at 06:13
https://developer.mozilla.org/en-US/docs/Web/CSS/flex flex-shrink is to control the height in a flexible way... this doesn't affect the min-height. — Wolfgang, Aug 18 '20 at 06:15
@RakibulIslam, sorry but I think that's not really the answer but rather a clarification that something in the layout is not quite right. I'm not good enough with flexboxes to know the correct answer... for me it has more the touch of a workaround - therefore as a comment. — Wolfgang, Aug 18 '20 at 06:20

score 2 · Answer 1 · answered Aug 18 '20 at 06:36

Your .content class is a flex item. But, the problem is that, in this case, the total height of all the child elements has exceeded the height of .content. As it is flex item, it shrinks the childs to create space for other child elements.

To solve this, use flex-shrink: 0; in your .search-field class.

The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink.

score 0 · Answer 2 · answered Aug 18 '20 at 06:27

Thanks for the Codepen! It looks like the parent container is trying to shrink its children to their minimum heights, one thing that you could do is leave all of the styles on the children so that you keep the cropping and any positioning you have in place, and on the parent container (.content), remove the flex-direction style and allow the children to wrap:

.content {
  height: calc(100vh - 7.2rem);
  overflow: scroll;
  flex: 0 1 80%;
  align-self: stretch;
  background-color: #00DBDE;
  background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%);
  display: flex;
/*   flex-direction: column;  */
  flex-wrap: wrap;
}

score -2 · Answer 3 · answered Aug 18 '20 at 06:13

you can change CSS for div.search-field as below to get desired results

.search-field {
  position: relative;
  z-index: 500;
  width: 99%;
  height: 34.4rem;
  min-height: 34.4rem;
  border-radius: .8rem;
  margin: 3rem auto;
  overflow: scroll;
  background-color: #85FFBD;
  background-image: linear-gradient(45deg, #85FFBD 0%, #FFFB7D 100%); }

Why div's height is 0 even though I have manually set it to be 34.4rem?

3 Answers3