I asked a question yesterday on setting up a flex layout for my scenario, Make inner div fill remaining height using flex, and it worked great in my larger project. I now am running into an issue where the items within that flex div extend past the page and the other container stretches further. I'd ideally like to have the items stay inside the container, and have the container have a scrollbar inside of it so the main portion of the page doesn't have to scroll - only the inside of the container. Any ideas why this doesn't work automatically?? I've tried moving some of the flex around and other various properties but no luck.
HTML/CSS:
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home-content {
display: flex;
border: 1px solid black;
height:100vh;
flex-flow: column;
}
.container {
flex: 1;
border: 1px solid red;
display: flex;
flex-direction: column;
}
#listItems {
border: 1px solid green;
height: 100%;
}
#listItems > ul {
display: flex;
flex-flow: row wrap;
list-style: none;
}
.item {
border: 1px solid purple;
width: 200px;
height: 200px;
margin-left: 4px;
}
</style>
</head>
<body>
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">
<ul>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>EDIT: Technically I don't want a scroll on the main portion of the page, but would like the div with the green border to not extend past the page and have the items in it not extend past its border as well as when there's lots of items that are more than its height, I can just scroll within that div of listItems that has the green border. Kind of like if that listItems div were to just be a photo gallery and can scroll inside of it to view all of the images
CodePudding user response：
Here try this:
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home-section {
display: flex;
border: 3px solid black;
height:100vh;
flex-flow: column;
max-height: 99vh;
}
.container {
flex: 1;
border: 3px solid red;
display: flex;
flex-direction: column;
height: fit-content;
max-height: 99vh;
overflow: auto;
}
#listItems {
border: 3px solid green;
height: 99vh;
overflow-y: auto;
}
#listItems > ul {
display: flex;
flex-flow: row wrap;
list-style: none;
}
.item {
border: 3px solid purple;
width: 200px;
height: 200px;
margin-left: 4px;
}
</style>
</head>
<body>
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">
<ul>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>I made it where the container is not bigger than the screen height, by adding a max-height. You can test it out by adding more code outside the container, and it will add another scrollbar. Also to change the max height go the the container and change the max height of it, and it will change the height. I made the borders a bit thicker so that it would be easier to visualize it.
CodePudding user response：
add a overflow: scroll; to the container you don't want overflown.
CodePudding user response：
you can use
flex-wrap: wrap; this will keep everything under the limit of the screen size
CodePudding user response：
add overflow: scroll; to the home-content div
CodePudding user response：
add overflow-flow: scroll; to .home-content/container and change the height on .home-content from 100vh to a pixel or percentage value. run the snippet
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.home-content {
margin:0 auto;
width: 70%;
padding: 50px;
display: flex;
border: 1px solid black;
height:250px;
flex-flow: column;
overflow: scroll;
}
.container {
flex: 1;
border: 1px solid red;
display: flex;
flex-direction: column;
}
#listItems {
border: 1px solid green;
height: 100%;
}
#listItems > ul {
display: flex;
flex-flow: row wrap;
list-style: none;
}
.item {
border: 1px solid purple;
width: 200px;
height: 200px;
margin-left: 4px;
}
</style>
</head>
<body>
<div class="home-section">
<div class="home-content">
<div class="container">
<form>
<label for="example">Input</label>
<input type="text" name="example">
</form>
<div id="listItems">
<ul>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
<li class="item">Item</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>