Отзывчивость кнопки терпит неудачу, когда окно свернуто, но отзывчивость братьев не терпит неудачу

Question

Итак, у меня есть этот веб-интерфейс, в котором мне нужно 6 кнопок, чтобы реагировать, 5 из них работают довольно хорошо, но последняя, ​​которую нужно расположить дальше вправо (кнопка 6 на рисунке), не выглядит так, как она должна предполагать работать. Когда окно развернуто, все выглядит хорошо:

Окно развернуто (выглядит хорошо)

Когда окно свернуто, оно пытается оставаться на виду, но оно становится укажите точку, в которой происходит сбой, с другими кнопками вместо того, чтобы просто сдаться, и, как и другие кнопки, просто сделайте то, что вы можете видеть на следующем изображении:

Кнопка 5 делает все правильно

Вместо этого кнопка 6 делает следующее:

Ошибка кнопки 6

Так что в принципе я не могу найти способ заставить кнопку 6 вести себя как и другие. Это мое html:

  <div style="display:flex">
    <button class="btn btn-primary pin-ready-btn">
      1111
    </button>
    <button class="btn btn-primary pin-ready-btn">
      2222222
    </button>
    <button class="btn btn-primary pin-ready-btn">
      3333333
    </button>
    <button class="btn btn-primary pin-ready-btn">
      44444
    </button>
    <button class="btn btn-primary pin-ready-btn">555555</button>
    <button class="btn btn-primary pin-ready-btn" id="btnSix">
      6666 6666666 66666666
    </button>
  </div>

CSS:

    .pin-ready-btn { margin-right: 22px !important; width: auto !important; }

#btnSix{ position: absolute !important; right: 70px !important; }

Спасибо всем за чтение, уделенное время и ответы.

Answer 1

В коде есть одна ошибка, 2 закрывающих тега для 2-й кнопки

А ниже - рабочий код, надеюсь, это то, что вам нужно.

<style>
.btn-holder { display:flex; justify-content:flex-start;}
.btn-holder button { background:#00a7ef; font-size:15px; color:#fff; border:0; cursor:pointer; margin:0 20px 0 0; padding:10px; border-radius:3px;}
.btn-holder button:last-child { margin-left:auto;}
</style>

 <div class="btn-holder">
    <button class="btn btn-primary pin-ready-btn">
      1111
    </button>
    <button class="btn btn-primary pin-ready-btn">
      2222222
    </button>
    <button class="btn btn-primary pin-ready-btn">
      3333333
    </button>
    <button class="btn btn-primary pin-ready-btn">
      44444
    </button>
    <button class="btn btn-primary pin-ready-btn">555555</button>
    <button class="btn btn-primary pin-ready-btn" id="Re-RunValidationBtn">
      6666 6666666 66666666
    </button>
  </div>