Я хочу сохранить гибкие элементы при изменении размера окна ... пожалуйста, помогите мне ... Я использовал минимальную ширину, но она не работала хорошо ... что со мной?
.sticky2 {
position: fixed;
z-index: 100;
min-width: 100%;
height: 50px;
top: 0px;
left: 0;
/* flex-wrap: nowrap; */
flex-wrap: wrap;
}
h2 {
display: inline-block;
}
header {
position: relative;
min-width: 0;
min-height: 0;
overflow: hidden;
/* flex-wrap: nowrap; */
/* max-width: 1384px;
min-width: 1014px; */
/* height: 100%; */
margin: 0 auto;
/* z-index: 200; */
display: flex;
justify-content: space-between;
align-items: center;
/* margin-top: 50px; */
background-color: rgb(102, 185, 102);
transition: 0.6s;
/* padding: 5px 0; */
padding: 10px 0;
flex-wrap: wrap;
}
/* */
/*header 높낮이 패딩을 주니까 scroll 길이가 맞네*/
/* */
header.sticky {
background-color: #fff;
padding: 20px 0;
/* min-width: 100%; */
/* height: 50px; */
flex-wrap: wrap;
min-width: 0;
min-height: 0;
overflow: hidden;
}
header h1 {
padding-left: 160px;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.d {
padding-right: 180px;
flex-wrap: nowrap;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.header-1 {
margin-right: 30px;
border-radius: 20px;
padding: 8px 15px;
background-color: rgb(171, 235, 171);
cursor: pointer;
font-weight: 700;
min-width: 0;
min-height: 0;
overflow: hidden;
}
.header-1,
.header-2,
.header__logo {
min-width: 0;
min-height: 0;
overflow: hidden;
}
.header-1:hover {
background-color: hotpink;
transition: all 0.9s;
}
<div class="sticky2">
<header class="sticky">
<h1 class="header__logo">world pet</h1>
<div class="d">
<span class="header-1">reservation</span
><span class="header-2">ask</span>
</div>
</header>
</div>
Как сохранить сгибаемые элементы при изменении размера окна?