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
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.