В настоящее время я сталкиваюсь с проблемой отключения кросс-браузера горизонтальной полосы прокрутки. Проблема в том, что весь параметр встроен в гибкую среду дисплея, и я не знаю фактической (фиксированной) высоты содержимого, потому что оно динамическое.
Мой текущий код выглядит следующим образом:
<div class="some-parent">
<div class="wrapper-outer">
<div class="wrapper-inner">
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
<div class="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
</div>
С соответствующим CSS:
.some-parent{
width: 100px;
position: relative;
padding: 8px 10px;
box-sizing: border-box;
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
}
.wrapper-outer{
width: 100%;
overflow: hidden;
}
.wrapper-inner{
overflow-y: hidden;
overflow-x: scroll;
display: flex;
flex-direction: row;
}
.wrapper-inner:after{
content: '';
display: block;
height: 20px;
height: 100%;
}
.content{
border: 1px solid black;
padding: 10px;
}
Как я уже сказал, фактическая высота элемента .content
неизвестна.
Есть ли способ отключить кросс-браузер с горизонтальной полосой прокрутки? Мой текущий подход до сих пор всегда заключался в том, чтобы установить высоту .wrapper-inner
20px выше, чем высота .wrapper-outer
с overflow: hidden
, но в этом случае, к сожалению, это не работает.
Вот соответствующий JSFiddle
Edit1: Содержание по-прежнему должно прокручиваться.