Как разместить div в конце другого div, используя flexbox?

Question

Я хочу поместить дочерний div в родительский div, который является Flexbox, так что я хочу, чтобы дочерний div был помещен в некоторый пробел в конце родительского div.

Что я пытаюсь сделать:

.outermost_div {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  height: 60px;
  align-items: center;
  padding-left: 8px;
  padding-right: 8px;
}

.button_div {
  height: 40px;
  padding: 0 16px 0 16px;
}

.divider {
  display: inline-block;
  width: 1px;
  height: 40px;
  border-top: 9px solid white;
  border-bottom: 9px solid white;
}

.outermost_div.additional {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

<div className="outermost_div additional">
  <div className="save_div">
    <button className="button_div" onClick={ props.on_selected}Save</button>
    <div className="divider" />
    <button className="button_div" onClick={props.on_cancel}>
        Cancel
    </button>
  </div>
</div>

На первом рисунке ниже показан вывод кода выше, а на втором изображен такой, каким я его хочу.

Answer 1

Если вы добавите немного margin-right к кнопке отмены (вместе с justify-content: flex-end на save_div).Это даст вам взгляд, который вы ищете.

.save_div {
  display: flex;
  justify-content: flex-end;
}

button.button_div:nth-child(2) {
  margin-right: 100px;
}

<div class="outermost_div additional">
  <div class="save_div">
    <button class="button_div" onClick={ props.on_selected}Save</button>
    <div class="divider" />
    <button class="button_div" onClick={props.on_cancel}>
                Cancel
            </button>
  </div>
</div>

Answer 2

   .outermost_div.additional {
    display: flex;
    align-items: center;
    justify-content: flex-end; --added this
    padding-right: 60px; --added this
} 

.outermost_div {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    height: 60px;
    align-items: flex-end;
    padding-left: 8px;
    padding-right: 8px;

    .button_div {
        height: 40px;
        padding: 0 16px 0 16px;
    }

    .divider {
        display: inline-block;
        width: 1px;
        height: 40px;
        border-top: 9px solid white;
        border-bottom: 9px solid white;
    }
}

.outermost_div.additional {
    display: flex;
    align-items: center;
    justify-content: flex-end;
     padding-right: 60px;
}

<div class="outermost_div additional">
    <div class="save_div">
        <button class="button_div" onClick= 
            {props.on_selected} Save</button>
        <div class="divider"/>
        <button class="button_div" onClick={props.on_cancel}>
            Cancel
        </button>
    </div>
</div>