Why is my overflowing child not triggering scroll in a flex container with overflow: auto? [дублировать] ⇐ Html

[Anonymous]

Я работаю над макетом, используя Flexbox и пытаюсь сделать горизонтально прокручиваемую область. У меня есть .content div с переполнением: Auto , а внутри него -. Тем не менее, никаких полос прокрутки не появляется, и я не могу прокручивать горизонтали. У вас есть идея? class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

Код: Выделить всё

      body, html {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background-color: #202324;
display: flex;
flex-direction: row;
overflow: hidden;
}

body {
display: flex;
flex-direction: row;
}

nav {
height: 100%;
width: 56px;
background-color: #2B2D2E;
}

#main {
align-items: center;
flex: 1;
grid-area: main;
height: 100%;
position: relative;
}

.frame {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}

header {
height: 34px;
width: 100%;
background-color: #2B2D24;
}

.content {
flex: 1;
overflow: auto;
position: relative;
white-space: nowrap;
}

.something {
height: 100%;
width: 3500px;
}< /code>




Test












< /code>
< /div>
< /div>
< /p>

 с переполнением: hidden; < /code>, так что работа, как и ожидание: < /li>
< /ul>

 class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">      body, html {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background-color: #202324;
display: flex;
flex-direction: row;
overflow: hidden;
}

body {
display: flex;
flex-direction: row;
}

nav {
height: 100%;
width: 56px;
background-color: #2B2D2E;
}

#main {
align-items: center;
flex: 1;
grid-area: main;
height: 100%;
position: relative;
overflow: hidden;
}

.frame {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}

header {
height: 34px;
width: 100%;
background-color: #2B2D24;
}

.content {
flex: 1;
overflow: auto;
position: relative;
white-space: nowrap;
}

.something {
height: 100%;
width: 3500px;
}< /code>




Test

Подробнее здесь: https://stackoverflow.com/questions/796 ... with-overf