Блог

Главная - Вопросы по программированию - переполнение div с шириной в процентах не работает

переполнение div с шириной в процентах не работает

#html #css #responsive-design

#HTML #css #адаптивный дизайн

Вопрос:

Если я задаю абсолютную ширину div, то переполнение работает нормально, но если я задаю ширину в процентах, переполнение применяется неправильно и выталкивает элемент рядом с ним за пределы экрана. JSFiddle: https://jsfiddle.net/mt9nrxxd /

 <div id="contentContainer">
<div id="firstLevel">
<div id="firstChild">
<div id="excessWidth">
</div>
</div>
</div>
<div id="secondChild">
</div>
</div>

#contentContainer{
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    height: 50px;
    background: white;
}
#firstLevel{
    width: 100%
}
#firstChild{
    width:100%;
    height: 50px;
    overflow:auto;
    background: yellow;
}
#excessWidth{
   background: red;
   width:550px;
   height: 50px;
}
#secondChild{
   background: orange;
   height: 50px;
   min-width: 80px;
}

Комментарии:

1. Какой div вызывает проблему?

2. Вам нужно уточнить. Единственный элемент, который у вас есть с любым видом переполнения, — это firstChild , который имеет ширину 100%. Поскольку все его родительские элементы имеют ширину 100%, это просто означает, что firstChild они будут охватывать всю ширину страницы. Поскольку его content ( excessWidth ) имеет ширину всего 550 пикселей, ему вообще не нужно переполняться.

3. Если вы попытаетесь уменьшить ширину excesswidth, она не будет занимать весь экран из-за гибкого отображения. Но в тот момент, когда ширина excessWidth начинает превышать 100% — 80 пикселей, он начинает нажимать secondChild вместо обычного действия прокрутки.