Я исправил проблему для вас, дайте мне знать. Элементы управления (текстовое поле, кнопка) заставляли width выходить за пределы 290px, и в соответствии с вашими требованиями оно должно быть в той же ширине.
.searchframe {
height: 80vh;
border: 2px solid yellow;
white-space: nowrap;
width: 290px;
overflow: auto;
}
.btnMenu {
color: #ffffff;
background: #2185D0;
}
.groupItemSearch {
padding-bottom: 10px;
border: 1px solid red;
display: inline-block;
}
<body>
<div class="searchframe">
<div class="groupItemSearch">
<a class="btnMenu">External Static pressure - inchAqua</a>
<div class="groupLeft">
<input type="text">
<label>～</label>
<input>
<label> inchAqua</label>
<button>Search </button>
</div>
</div>
</div>
</body>
Если вам нужно несколько детей внизу, то вот как использовать:
.searchframe {
height: 80vh;
border: 2px solid yellow;
white-space: nowrap;
width: 290px;
overflow: auto;
display: flex;
flex-direction: column;
}
.btnMenu {
color: #ffffff;
background: #2185D0;
}
.groupItemSearch {
padding-bottom: 10px;
display: inline-block;
}
<html>
<head>
</head>
<body>
<div class="searchframe">
<div class="groupItemSearch"> <a class="btnMenu">External Static pressure - inchAqua</a>
<div class="groupLeft">
<input type="text">
<label>～</label>
<input>
<label> inchAqua</label>
<button>Search </button>
</div>
</div>
<div class="groupItemSearch"> <a class="btnMenu">External Static pressure - inchAqua</a>
<div class="groupLeft">
<input type="text">
<label>～</label>
<input>
<label> inchAqua</label>
<button>Search </button>
</div>
</div>
<div class="groupItemSearch"> <a class="btnMenu">External Static pressure - inchAqua</a>
<div class="groupLeft">
<input type="text">
<label>～</label>
<input>
<label> inchAqua</label>
<button>Search </button>
</div>
</div>
</div>
</body>
</html>