Flexbox-Objekt mit scrollbarem Inhalt

Question

Ich habe ein einfaches Flexbox-Layout mit zwei Elementen; eine Flüssigkeitsbreite und die andere fest. Wenn der flüssige Gegenstand Kinder enthält, die breiter/größer als er selbst sind, bewirkt dies, dass die Seite scrollt, und nicht der flüssige Gegenstand selbst.

Ich habe versucht, Lösungen für ein paar ähnliche Fragen, aber keine scheint für mich zu arbeiten. Als jemand, der Flexbox sehr viel nicht verwendet hat, fühle ich mich wie ich offensichtlich etwas fehlt bin ...

EDIT:

Hinzufügen overflow:auto zu .main behebt das Scrollen, danke. Allerdings wurde mein Beispiel etwas vereinfacht; Ich versuche auch, den untergeordneten Artikel sowohl vertikal als auch horizontal zu zentrieren, unter Verwendung der Flexbox align-items und justify-content. Wenn dies angewendet wird, wird das main-Element nicht rollbar.

EDIT 2

verwendete ich den margin:auto Trick auf dem Artikel Kind als bei Can't scroll to top of flex item that is overflowing container angegeben das zweite Problem zu beheben.

* { 
 
\t margin: 0; 
 
} 
 

 
html, body { 
 
\t height: 100%; 
 
} 
 

 
.container { 
 
\t display: flex; 
 
\t height: 100%; 
 
} 
 

 
.main { 
 
\t flex: 1; 
 
\t height: 100%; 
 
\t background: green; 
 
     overflow: auto; 
 
    
 
     display: flex; 
 
\t align-items: center; 
 
\t justify-content: center; 
 
} 
 

 
.sidebar { 
 
\t flex: 0 0 200px; 
 
\t background: blue; 
 
\t height: 100%; 
 
} 
 

 
.item { 
 
\t width: 2000px; 
 
\t height: 50px; 
 
\t background: red; 
 
}

<div class="container"> 
 
\t <div class="main"> 
 
\t \t <div class="item"> 
 
\t \t \t When his is 2000px wide, it should scroll inside its parent. 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="sidebar"> 
 
\t \t 200px wide sidebar 
 
\t </div> 
 
</div>

Answer 1

Sie müssen overflow:auto an die Mutter anzuwenden. Diese Eigenschaft ist nicht automatisch

* { 
 
\t margin: 0; 
 
} 
 

 
html, body { 
 
\t height: 100%; 
 
} 
 

 
.container { 
 
\t display: flex; 
 
\t height: 100%; 
 
} 
 

 
.main { 
 
\t flex: 1; 
 
\t height: 100%; 
 
\t background: green; 
 
\t overflow: auto; 
 
} 
 

 
.sidebar { 
 
\t flex: 0 0 200px; 
 
\t background: blue; 
 
\t height: 100%; 
 
} 
 

 
.item { 
 
\t width: 2000px; 
 
\t height: 50px; 
 
\t background: red; 
 
}

<div class="container"> 
 
\t <div class="main"> 
 
\t \t <div class="item"> 
 
\t \t \t This is 2000px wide, and should scroll inside its parent. Instead, the body is scrolling. 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="sidebar"> 
 
\t \t 200px wide sidebar 
 
\t </div> 
 
</div>