Align inner div to bottom of item

Question

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>

score 1 · Accepted Answer · answered Nov 29 '21 at 06:18

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>

Ahmad Habib · Answer 2 · 2021-11-29T06:49:26.810

You can use position: absolute and bottom: 0 and give position: relative to the .item class.

* {
  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;
  position: relative;
}

.footer {
  position: absolute;
  bottom: 0;
}

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

Fiddle

Hm that seems to put it to the very bottom of the page and not aligned to the bottom of the item container, was there a way to get it to align to bottom of that portion? — Hunter, Nov 29 '21 at 06:18

Align inner div to bottom of item

2 Answers2