在包含div的底部对齐Flex导航项

Question

I am trying to align 3 tabbed items (using ul flexbox items) on top of an image at the bottom using a containing div, but for the life of me, I can't get them all to stay within the containing div.

If I use position:absolute; bottom:0; position:absolute; bottom:0; It makes everything worse, so I am a bit stuck how to fix it! I also tried margin-top:auto on the <li> , and that didn't help either.

Here is the JSFiddle: link or code directly:

<div class="container">
  <img src="http://via.placeholder.com/400x400">
  <ul class=flextabs>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
    <li><a href="#">Testing</a></li>
  </ul>
</div>

.container {
  width: 400px;
  height: 400px;
  background: blue;
  text-align: center;
  border:solid;
}

ul.flextabs {
    margin:0;
    padding:0;
    list-style:none;
    display:flex;
}
li {
    display:flex;
    flex-direction:column;
    flex: 1 0 auto;
    border:1px solid #000;
}
a {
    text-decoration:none;
    color:#000;
    background:red;
    padding:5px;
}
a:hover{background:orange;}

This is the current result:

vs What I would like to achieve (above image edited)

Answer 1

I would use position: absolute; on the ul to place it at the bottom of the container, and apply flex to it - not to the container or to the li s. And I also changed and added some other details:

 .container { width: 400px; height: 400px; background: blue; text-align: center; border: 2px solid black; position: relative; } ul.flextabs { position: absolute; bottom: 0; width: 100%; margin: 0; padding: 0; list-style: none; display: flex; } li { display: inline-block; width: 33.33%; border: 1px solid #000; } a { text-decoration: none; color: #000; background: red; padding: 5px; display: block; } a:hover { background: orange; } 

 <div class="container"> <img src="http://via.placeholder.com/400x400"> <ul class=flextabs> <li><a href="#">Testing</a></li> <li><a href="#">Testing</a></li> <li><a href="#">Testing</a></li> </ul> </div>