How make main content div using css grid expand with content?

Question

Question:

I am trying to css grid div with content expand to show all the content within its div down page.

I have tried using overflow-y:hidden on the 'item-area' (container) and 'item-grid' divs but this causes the div to cutoff content in the 'item-grid' div. Making the overflow-y visible did not make 'item-area' div expand. Note that the footer below uses display:flex but does not have a position of absolute.

Apply height 100vh (as well as min-height 100vh) to 'item-area' div did not work. Without any overflow properties applied to the 'item-grid' makes its scroll-able within the 'item-area' instead of scroll-able within the page. I have tried making the class *{} in styles.css to have height:100vh but it made every div have scrollbars. Adding class for html,body{} to have height 100vh did not affect the page.

render(){
    const { slidervalue } = this.state
    return(
      <div id="item-area">
        <div id="side-menu">
          <h3>Filters</h3>
          <div className="size-box">
            <h5>Size:</h5>
            <ul>
              <li className="">
                <a>
                  <label class="container">XS
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">S
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">M
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">L
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">XL
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
              <li className="">
                <a>
                  <label class="container">XXL
                    <input type="checkbox" />
                    <span class="checkmark"></span>
                  </label>
                </a>
              </li>
            </ul>
          </div>
          <div className="color-box">
            <h5>Color:</h5>
            <ul className="color-list">
              <li className="swatch color-swatch-black pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-blue pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-red pointer">
                <a>  </a>
              </li>   <br />
              <li className="swatch color-swatch-nude pointer">
                  <a>  </a>
              </li>
              <li className="swatch color-swatch-white pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-grey pointer">
                <a>  </a>
              </li>   <br />
              <li className="swatch color-swatch-purple pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-brown pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-yellow pointer">
                <a>  </a>
              </li>  <br />
              <li className="swatch color-swatch-orange pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-pink pointer">
                <a>  </a>
              </li>
              <li className="swatch color-swatch-green pointer">
                <a>  </a>
              </li>  <br />
            </ul>
          </div>
          <div className="price-range">
            <h5 className="">Price:</h5>
            <ul className="prices">
              <li><a className="pointer">$10</a></li>
              <li><a className="pointer">$20</a></li>
              <li><a className="pointer">$30</a></li>
              <li><a className="pointer">$40</a></li>
              <li><a className="pointer">$50</a></li>
              <li><a className="pointer">$100</a></li>
            </ul>
          </div>
        </div>
        <div id="item-grid">
          <div className="item-product">
            <img className="item" src="/tops/1.jpg" />
            <p className="item-name">Light Blue Dress</p>
            <p className="item-price">$20</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/4.jpg" />
            <p className="item-name">Nude Dress with Blue Floral Design</p>
            <p className="item-price">$20</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/5.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/6.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/7.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/8.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/9.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/3.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
          <div className="item-product">
            <img className="item" src="/tops/3.jpg" />
            <p className="item-name">White Dress with Black Design</p>
            <p className="item-price">$15</p>
          </div>
        </div>
      </div>
    );
  }

#item-area{
  display: grid;
  grid-template-columns: 25% 75%;
  /* height: 100vh; */
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 30px 30px;
  align-items: stretch;
  overflow-y: hidden;
  position: relative;
}

#side-menu{
  /* background-color: #33bced; */
  min-height: 100vh;
  overflow-y: hidden;
}

.size-box{

}

.size-box ul{
  list-style-type: none;
}

#item-grid{
  /* background-color: #50D050; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  padding-left: 50px;
  height: 100vh;
  min-height: 100vh;
  overflow-y: hidden;
}

.item-product{
  height: 600px;
}

.item{
  height: 500px;
}

#footer{
  text-align: center;
  justify-content: center;
  display: flex;
  flex-direction: row;
}

.footer_item{
  margin-left: 30px;
  margin-right: 30px;
  width: 200px;
  text-align: center;
}

.footer_item ul{
  padding: 0 !important;
  list-style: none;
}

[enter image description here][1]

Appreciate any suggestions I can get as I have kind of been banging my head in terms of getting it to work.

Thanks - Adam H

Note: Included image is using overflow-y: hidden property on both container div of 'item-area' (includes filters side menu and item-grid) and 'item-grid' (product list grid).

[1] Overflow-y hidden https://i.sstatic.net/g3BWA.jpg (link)

[2]: Overflow-y auto https://i.sstatic.net/n8rla.jpg

Answer 1

--Edit-- Just seen the above answer just now as I was typing this. Thanks for explaining what happened.

I can't believe it was something simple as removing the height property on the 'item-area' container div that contains sub grid 'item-grid' div.

It seems by defining height of 100vh is made it cut off content. I started playing with the height in the debugger in Firefox and started changing the values to 1000px or 2000px, and I noticed a change. Then I decided to see what happens if I remove height property which then allowed all the content to be displayed.

Answer 2

A div will by default stretch to fit it's content unless you're giving it a fixed height.

I resolved your issue by removing the height from #item-grid

https://codepen.io/chriseckenrode/pen/wvvxZOY

#item-grid{
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 30px;
  padding-left: 50px;
  overflow-y: hidden;
}

min-height is ok here, but if you set the height you're saying the container can grow no larger than that.