до 4х элементов
min-width: auto
и поэтому ужимаются максимум до значения min-content
. Отсюда и решение, задать контентному блоку min-width: 0;
. У вас это блок с классом jshop_prod_description. .head-header__burgerMenu {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.head-header__burgerMenu div {
width: 40px;
height: 5px;
background: red;
}
.head-header__burgerMenu {
...
gap: 5px;
}
.head-header__burgerMenu div {
transform: translateX(5px);
}
.head-header__burgerMenu div:nth-child(2) {
transform: translateX(-5px);
}
<div class="container">
<div class="block">
<div class="text">
Lorem ipsum...
</div>
</div>
</div>
.block {
display: grid;
grid-template-columns: 1fr 1fr;
}
.text {
grid-column: 2 / 3;
}
.block {
display: flex;
}
.text {
width: 50%;
margin-left: auto;
}
.text {
margin-left: 50%;
}
ело в том, что её всё равно видно когда она вызывается, т.е вниз едет из предела окна и по шапке прозрачной идёт.