Aligning boxes such that it is right corner of parent-CodePudding

I have a outer box in blue corner and inner box in red color. Now I want to align the red box in the bottom-right corner of the blue box.

Here is my code:

.my-container {
  border: 1px solid blue;
  height: 150px;
  position: relative;
}

.my-list {
  border: 1px solid red;
  width: 200px;
  position: relative;
  bottom: 100%;
  right: 100%;
}

.list-item {
  text-align: center;
}

<div class="my-container">
  <ul class="my-list">
    <li clas="my-item veg">Carrot</li>
    <li clas="my-item veg">Beetroot</li>
    <li clas="my-item meat">Fish</li>
    <li clas="my-item meat">Crab</li>
  </ul>
</div>

If I run this I am not able to see the red box itself completly.

CodePudding user response：

Change the CSS for .my-list to:

.my-list {
  border: 1px solid red;
  width: 200px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin:0;
}

.my-container {
  border: 1px solid blue;
  height: 150px;
  position: relative;
}

.my-list {
  border: 1px solid red;
  width: 200px;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0;
}

.list-item {
  text-align: center;
}

<div class="my-container">
  <ul class="my-list">
    <li clas="my-item veg">Carrot</li>
    <li clas="my-item veg">Beetroot</li>
    <li clas="my-item meat">Fish</li>
    <li clas="my-item meat">Crab</li>
  </ul>
</div>

Or use flexbox with:

.my-container {
  border: 1px solid blue;
  height: 150px;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
}

.my-list {
  border: 1px solid red;
  width: 200px;
  margin: 0;
}

.list-item {
  text-align: center;
}

<div class="my-container">
  <ul class="my-list">
    <li clas="my-item veg">Carrot</li>
    <li clas="my-item veg">Beetroot</li>
    <li clas="my-item meat">Fish</li>
    <li clas="my-item meat">Crab</li>
  </ul>
</div>