I have this bit of code. A salmon coloured part is a child with a flex container that has overflow set to auto and it also set to fill the remaining space vertically.
<div style=" height: 300px; width: 400px; border: 1px solid black; display: flex; flex-direction: column;"><div>THIS IS THE HEADER TEXT</div><div style="flex-grow: 1; background: salmon; overflow-y: auto"><div style=" display: flex; align-items: center; justify-content: center; height: 100%;"><div><div>Sub header</div><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p></div></div></div></div>If the text within it does not overflow all is good. However, as soon as it overflows, the top part Sub header get cut.
<div style=" height: 300px; width: 400px; border: 1px solid black; display: flex; flex-direction: column;"><div>THIS IS THE HEADER TEXT</div><div style="flex-grow: 1; background: salmon; overflow-y: auto"><div style=" display: flex; align-items: center; justify-content: center; height: 100%;"><div><div>Sub header</div><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p></div></div></div></div>Removing align-items: center; seems to fix this issue
<div style=" height: 300px; width: 400px; border: 1px solid black; display: flex; flex-direction: column;"><div>THIS IS THE HEADER TEXT</div><div style="flex-grow: 1; background: salmon; overflow-y: auto"><div style=" display: flex; justify-content: center; height: 100%;"><div><div>Sub header</div><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p><p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime voluptatem, ducimus magnam vero asperiores culpa rerum laudantium officia ad modi inventore dicta reiciendis, minus sit incidunt praesentium numquam voluptatibus quae.</p><p>bla bla</p></div></div></div></div>Is there anyway to fix it without removing align-items: center;?