I have a flexbox A with 100vh height. This flexbox contains a child flexbox B. Flexbox B has one child with very long content. I want this very long to overflow inside it's div. Instead, flexbox A expands outside viewport.
html,
body {
margin: 0;
padding: 0;
}
body {
height: 100vh;
max-height: 100vh;
display: block;
}
.parent {
height: 100%;
max-height: 100%;
display: flex;
flex-direction: column;
}
.child1 {
background: red;
height: 50px;
flex-shrink: 0;
}
.child21 {
background: green;
height: 50px;
flex-shrink: 0;
}
.child22 {
overflow: auto;
}<html>
<body>
<div id="flexboxA" class="parent">
<div class="child1">
</div>
<div id="flexboxB" class="child2">
<div class="child21">
</div>
<div class="child22">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna quam, ultrices vel volutpat a, mollis at nisl. Maecenas sem sem, rutrum eu metus eu, eleifend sollicitudin mauris. In sit amet orci eget quam finibus ullamcorper. Morbi suscipit
id risus sagittis lacinia. Nam enter code hereeget ligula nec dui eleifend congue. Sed ac egestas sem. Nam tellus nisi, iaculis at suscipit ac, tincidunt eu risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Curabitur felis justo, aliquet vitae elit et, suscipit gravida velit. Vestibulum non odio eu ligula mollis cursus in vel orci. Curabitur non pretium purus. In sit amet ligula nibh. Maecenas mollis, magna ut placerat sagittis, nisi risus
dignissim tortor, eget pellentesque nulla massa ac odio. Fusce a dolor mi. Maecenas vel placerat dolor. Cras feugiat mauris eu nisl mattis, sit amet euismod nisi facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
cubilia curae; Nunc mollis malesuada nisl, viverra dapibus elit efficitur in. Aliquam tincidunt nec enim at vulputate. Suspendisse scelerisque mauris in tristique ornare. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Vivamus eu velit rutrum diam ultricies eleifend. Aliquam ultrices massa in arcu bibendum, ac euismod quam elementum. Proin feugiat libero in elit gravida, pulvinar ullamcorper erat molestie. Proin fermentum, ligula quis viverra
viverra, orci dui posuere tortor, eu sodales velit felis eget mi. Nunc a malesuada lectus. Donec convallis, augue in malesuada volutpat, nibh ipsum efficitur lacus, sed fringilla libero nunc eget massa. Fusce ut imperdiet est, vel congue metus.
Nunc facilisis orci nec posuere mollis. Morbi leo turpis, bibendum nec mattis id, varius non eros. Cras sem mauris, molestie a viverra quis, vestibulum vel turpis. In pellentesque rutrum arcu nec malesuada. Ut iaculis nibh sed ante elementum,
non luctus sapien vulputate. Phasellus dictum dolor nec risus blandit, eget fringilla enim pharetra. Maecenas quis quam quis leo volutpat dignissim. Aenean et tempus enim. Suspendisse eros turpis, tincidunt eu lorem eu, cursus dignissim sem. Sed
lobortis arcu sit amet nulla varius molestie. Nunc vulputate dui dolor, at ultricies ante elementum eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Etiam sed turpis consectetur, blandit mauris vitae, euismod est.
Nulla in nulla sagittis, ornare magna sit amet, suscipit mi. Ut laoreet at erat id aliquam. Suspendisse ornare odio a mi laoreet dignissim. Mauris mi magna, tincidunt sed dignissim sed, elementum eget metus. Aenean auctor nulla diam, quis feugiat
risus volutpat eu. Nulla pharetra velit aliquam magna gravida suscipit. Integer eget mauris et ante porta tristique. Morbi id tincidunt nulla.
</div>
</div>
</div>
</body>
</html>My real code is more complex (vuejs components). Is there a way to fix this code ?