Flexbox layout losing proportions when reduced in size

To avoid the Flexbox layout issue, you need to add the following:

* {
   flex-shrink: 0;
   min-width: 0;
   min-height: 0;
}

Here, 

flex-shrink: 1 - Flex items are allows to shrink

min-width: 0 - flex items to shrink past their content

Nitya Raut

Published on 10-Apr-2018 08:33:12

• Related Questions & Answers
• CSS Flexbox Layout Module
• Advance CSS layout with flexbox
• How to create a flexbox Layout in HTML?
• C++ program to find reduced size of the array after removal operations
• Create an inline flexbox container on a specific screen size in Bootstrap 4
• Create a flexbox container on a specific screen size with Bootstrap 4
• Specify the size of the rows in a CSS grid layout
• Flexbox and vertical scroll in a full-height app using newer Flexbox API with HTML
• How to work with Flexbox elements in CSS?
• Create an inline flexbox container in Bootstrap 4
• CSS Grid Layout
• Create a Flexbox container with Bootstrap 4
• How to rethrow InnerException without losing stack trace in C#?
• Is engineering really losing its worth by the time?
• Convert an array to reduced form (Hashing) in C++