Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> .box { width: 320px; height: 120px; border: 1px solid #666; display: -webkit-flex; display: flex; } .box div { -webkit-flex-grow: 1; -webkit-flex-shrink: 2; -webkit-flex-basis: 100px; flex-grow: 1; flex-shrink: 2; flex-basis: 100px; } .box div:nth-of-type(2) { -webkit-flex-shrink: 5; flex-shrink: 5; } </style> </head> <body> <h2>Flex-shrink example</h2> <div class="box"> <div style="background-color: #eeeeee;"></div> <div style="background-color: #1c87c9;"></div> <div style="background-color: #8ebf42;"></div> <div style="background-color: #cccccc;"></div> <div style="background-color: #666666;"></div> </div> </body> </html>