Кнопки выходят за рамки блока при масштабировании

Question

Делаю адаптивное меню для сайта. При масштабировании кнопки выходят за рамки меню.

Помогите испрвить.

$(document).ready(function() {
  console.log("oo");
  $('.vhod-block').hide();
  $('.reg-block').hide();
  $('.create-block').hide();
  // $('.menu').hide();
  $(window).on("resize", function() {

    if ($(window).width() <= 170) {

      // $('.mikrofon-block').hide();
      // $('.about-block').hide();
      // $('.create-block').hide();

      $('.menu').show();
    }

  })
})

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Concert+One&family=Nunito:wght@300&family=Roboto&display=swap');
body {
  /* box-sizing: border-box; */
  background-color: #dfdfe2;
}

.header {
  border: 0.4vw solid #dfdfe2;
  border-bottom-color: #7ec532;
  border-radius: 0.4vw;
  height: 18vw;
}

input:hover {
  cursor: pointer;
}

.kakaha {
  width: 50%;
  height: 50%;
  position: relative;
  margin: 0% 0% 0% 50%;
}

.talk-block {
  font-family: 'Nunito', sans-serif;
  font-size: 4vw;
  display: inline-block;
}

.vhod-block {
  font-family: 'Roboto', sans-serif;
  display: inline-block;
  position: relative;
  background-color: #dfdfe2;
  border: 0px solid black;
  margin-left: 26vw;
  color: #7c7772;
  font-size: 1.5vw;
}

.menu-button {
  position: relative;
  margin: 0vw 0vw 1vw 10vw;
  top: -0.4vw;
  background-color: #dfdfe2;
  border: 0px solid white;
  width: 9vw;
  height: 5vw;
  font-size: 2vw;
  color: #009bff;
}

.button-block {
  display: inline-block;
}

.menu {
  font-size: 1vw;
  position: relative;
  white-space: normal;
  font-family: 'Roboto', sans-serif;
  border: 0.1vw solid rgb(124, 122, 122);
  border-radius: 0.4vw;
  left: 48vw;
  top: -5vw;
  padding: 0.7vw;
  position: relative;
  width: 9%;
  height: 40%;
}

.reg-block {
  font-family: 'Roboto', sans-serif;
  position: relative;
  display: inline;
  background-color: #dfdfe2;
  border: 0px solid black;
  color: #7c7772;
  margin-left: 0px;
  /* margin-left: 40%; */
  font-size: 1.5vw;
}

.create-block {
  font-family: 'Roboto', sans-serif;
  position: relative;
  display: inline;
  background-color: #dfdfe2;
  border: 0px solid black;
  color: #7c7772;
  /* margin-left: 40%; */
  font-size: 1.5vw;
  margin-left: 0px;
}

.container {
  padding: 0px;
}

.vhod-menu {
  width: 100%;
  height: 24%;
  font-size: 1vw;
}

.reg-menu {
  width: 100%;
  height: 24%;
  font-size: 0.8vw;
}

.create-menu {
  position: relative;
  width: 100%;
  height: 24%;
  font-size: 0.7vw;
}

@media screen and (max-width: 1188px) {
  .mikrofon-block {
    margin-left: 1vw;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="style.css" rel="stylesheet" type="text/css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="header">
      <div class="talk-block">hello.ru</div>
      <!-- <input type="button" class="vhod-block" value="ВХОД">
            <input type="button" class="reg-block" value="РЕГИСТРАЦИЯ">
            <input type="button" class="create-block" value="СОЗДАТЬ ДИАЛОГ">-->
      <input type="button" class="menu-button" value="МЕНЮ">
      <div class="menu">
        <input type="button" class="vhod-menu" value="ВХОД">
        <hr>
        <input type="button" class="reg-menu" value="РЕГИСТРАЦИЯ">
        <hr>
        <input type="button" class="create-menu" value="СОЗДАТЬ ДИАЛОГ">
      </div>
    </div>
  </div>
  <script>
  </script>
</body>

</html>

При мелком масштабе:

Answer 1

В классе menu сделайте height: auto;.

Сейчас у вас стоит значение height: 40%;

БЛОГ НА HUSL

Кнопки выходят за рамки блока при масштабировании

Ответы (1 шт):