IE flex collapse bug fix

Developer
Roland Warmerdam
Size
2,678 Kb
Views
44,506

How do I make an ie flex collapse bug fix?

Bug fix for the IE 10-11 Flexbox bug where flex items collapse to nothing when using the flex shorthand property in a vertical Flexbox layout. . What is a ie flex collapse bug fix? How do you make a ie flex collapse bug fix? This script and codes were developed by Roland Warmerdam on 23 September 2022, Friday.

IE flex collapse bug fix Previews
IQ Test

IE flex collapse bug fix - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>IE flex collapse bug fix</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="row"> <div class="column"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero sed neque sunt eveniet quidem est. Natus facilis et quis velit iure at id corrupti explicabo sunt quod. Maxime officia! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero sed neque sunt eveniet quidem est. Natus facilis et quis velit iure at id corrupti explicabo sunt quod. Maxime officia! </div> </div> <div class="column"> <div class="inner"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem libero sed neque sunt eveniet quidem est. Natus facilis et quis velit iure at id corrupti explicabo sunt quod. Maxime officia! </div> </div>
</div>
<label class="fix-toggle"> <input type="checkbox"> Toogle bug fix
</label> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

IE flex collapse bug fix - Script Codes CSS Codes

.row { display: -ms-flexbox; display: -webkit-box; display: flex;
}
.column { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: column; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; width: 300px;
}
.inner { -ms-flex: 1; -webkit-box-flex: 1; flex: 1; background: lightblue;
}
.fix .inner { -ms-flex: 1 auto; -webkit-box-flex: 1; flex: 1 auto;
}
.inner { padding: 0.3em 0.5em; margin: 0.5em; border-radius: 0.5em;
}
.fix-toggle { position: fixed; top: 0; left: 0; padding: 0.3em 0.5em; border-bottom-right-radius: 0.3em; background: white; box-shadow: 0 0 3px 1px #333; line-height: 1;
}

IE flex collapse bug fix - Script Codes JS Codes

$(function () { $('.fix-toggle input').on('change', function () { $('body').toggleClass('fix'); });
});
IE flex collapse bug fix - Script Codes
IE flex collapse bug fix - Script Codes
Home Page Home
Developer Roland Warmerdam
Username Rowno
Uploaded September 23, 2022
Rating 3
Size 2,678 Kb
Views 44,506
Do you need developer help for IE flex collapse bug fix?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Roland Warmerdam (Rowno) Script Codes
Name
Bootstrap Carousel Fade Transition
Chameleon background
Legacy flexbox invisible float bug fix
SVG line animation
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!