Using my example from my previous questions and this current setup, when the text in the body portion gets too long (my project has it break-word to next line), the remaining items has the buttons at the top still. I was looking to see how I can align that footer to the bottom always even if some items are larger than others? Probably need to run my sample below and see specifically, but the second item is where you can see the button still at the top. I tried with making the items inside the list item flex but couldn’t get it particularly. Any ideas are much appreciated 🙂
<!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;
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">
<div class="body">
<p>Stuff here...............................................</p>
</div>
<div class="footer">
<button>Click</button>
</div>
</li>
<li class="item">
<div class="body">
<p>Stuff here</p>
</div>
<div class="footer">
<button>Click</button>
</div>
</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>>Solution :
Hope it’s work for you !!!
.item {display: flex; flex-direction: column;}
.item .body {display: flex; flex:1;}
*{
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;
margin-left: 4px;
display: flex;
flex-direction: column;
}
.item .body {
display: flex;
flex: 1;
}<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">
<div class="body">
<p>Stuff here...............................................</p>
</div>
<div class="footer">
<button>Click</button>
</div>
</li>
<li class="item">
<div class="body">
<p>Stuff here</p>
</div>
<div class="footer">
<button>Click</button>
</div>
</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>