Как остановить исчезание одного контейнера в другой? При увеличении и выходе ⇐ Javascript

[Anonymous]

искренне извиняясь, если это уже спросили ранее, я смотрел повсюду и не смог найти ответ на мой конкретный вопрос вне гидов о отзывчивости, который не сработал, когда я их попробовал (хотя это может быть полностью я.) < /p>
У меня есть один контейнер в другом, и я хочу, чтобы страница была просмотрена при масштабировании, однако контейнер отрезается другим, он находится внутри, когда вы увеличиваете, но Я бы предпочел, если это Вместо этого сократился. Я пробовал максимальную и мин ширину, но ширина мин ничего не сделала. Вот мой html. < /P>









Profile
Ref Sheet







About
Extra







Extra content


















< /code>
и css < /p>
@media screen and (max-width: 320px) {
.wrapper {
display: flex;
}
}

#wrapper {
width: 100%;
height: 100%;
}

#main {
color: red;
background-color: pink;
max-width:76rem;
min-width: 40rem;
width: 52%;
height: 30rem;
margin-top: 3rem;
margin-inline: auto;
border: 6px solid;
border-color: brown;
border-radius: 15% / 38px;
padding: 4px;
}

#content {
color: rgb(0, 0, 0);
background-color: beige;
max-width:66rem;
width: 96%;
height: 27rem;
position: relative;
top: 1.4rem;
margin-inline: auto;
border: 4.5px solid brown;
border-radius: 15% / 30px;
overflow: auto;
scrollbar-width: none;
}

#profileimage {
background-color: pink;
width: 16rem;
height: 25rem;
border: 2.5px solid brown;
border-radius: 15% / 15px;
position: relative;
top: 0.4rem;
}

#references {
color: red;
}

#about {
position:relative;
background-color:pink;
left:17rem;
bottom:22.6rem;
width:27.4rem;
height:20rem;

}

#aboutimg {
position:relative;
background-color:lightblue;
width:10rem;
height:12rem;
}

#aboutcontent {

}

#aboutbio {

}

.flex-container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}

.box {
flex-grow: 1;
flex-shrink: 1;
flex-basis: calc(25% - 10px);
margin: 5px;
}

img {
width: 100%;
}

.tab {
position: relative;
text-align: center;
top: 4.5rem;
}

.tab button {
background-color: burlywood;
padding: 4px;
width: 10rem;
font-size: 1.8rem;
border: 6px solid brown;
border-radius: 10% / 8px;
cursor: pointer;
color: rgb(176, 103, 66);
}

.tab2 {
position: absolute;
text-align: center;
top: 0.5rem;
left: 22rem;
}

.tab2 button {
background-color: burlywood;
width: 8rem;
font-size: 18px;
border: 3.5px solid brown;
border-radius: 10% / 8px;
cursor: pointer;
color: rgb(176, 103, 66);
}

.tab button:hover {
background-color: rgb(191, 147, 89);
color: rgb(144, 58, 32);
border: 6px solid brown;
border-radius: 10% / 8px;
}

.tab button:active {
background-color: rgb(153, 73, 51);
color: rgb(70, 21, 6);
border: 4px solid brown;
border-radius: 10% / 8px;
}

.tabcontent {
padding: 6px 12px;
border-top: none;
display: none;
}

.tabcontent.active {
display: block;
}

@media screen and (max-width: 800px) {

}
< /code>
Изменить: у меня также есть JavaScript < /p>


document.getElementById('wrapper').addEventListener('click', (e) => {
const btn = e.target.closest('button.tablinks');
if (!btn) return;

const targetId = btn.dataset.target;
const currentTab = document.getElementById(targetId);
if (!currentTab) return;

// Use the parent of the target tab as the container.
const container = currentTab.parentElement;

// Only toggle direct children of that container.
container.querySelectorAll(':scope > .tabcontent').forEach(tab => {
tab.classList.toggle('active', tab === currentTab);
});
});


Подробнее здесь: https://stackoverflow.com/questions/794 ... -in-and-ou