Flexbox and vertical scroll in a full-height app using newer Flexbox API with HTML

The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. The flex property sets the flexible length on flexible items.

For example −

#container article {
   -webkit-flex: 1 1 auto;
   overflow-y: auto;
   height: 0px; /*here the height is set to 0px*/
}

If you want a min-height, the use height: 100px; that it is exactly the same as − min-height: 100px;

#container article {
   -webkit-flex: 1 1 auto;
   overflow-y: auto;
   height: 100px; /*here the height is set to 100px*/
}

Chandu yadav

Published on 21-Mar-2018 09:52:52

• Related Questions & Answers
• Horizontal and Vertical Center Alignment with Flexbox in CSS3
• Advance CSS layout with flexbox
• How to create a flexbox Layout in HTML?
• Create a Flexbox container with Bootstrap 4
• CSS Flexbox Layout Module
• How to work with Flexbox elements in CSS?
• Does 'position: absolute' conflict with flexbox?
• Solve unknown gap between elements in Flexbox with HTML5.
• Setting a Fixed Width for Items in CSS Flexbox
• Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)
• Create a flexbox container on a specific screen size with Bootstrap 4
• Flexbox layout losing proportions when reduced in size
• Create an inline flexbox container in Bootstrap 4
• Create an inline flexbox container on a specific screen size in Bootstrap 4
• Creating a Full Height Page with Fixed Sidebar and Scrollable Content Area in CSS