Apparently, the correct solution is to use the break-before or break-after property: A break is forced wherever the CSS2.1 page-break-before/page-break-after [CSS21] or the CSS3 break-before/break-after [CSS3-BREAK] properties specify a fragmentation break. At the time of writing, most browsers implement the *-break-* properties incorrectly or do not implement them at all. Consider this answer ahead of … Read more
The proper way to do it is with flex. Set flex to 1 1 auto for the middle column, and 0 0 100px for the side columns. This makes it so the side columns are always the specified width (or width of content, if set to auto), and the middle column takes up the remaining … Read more
From the specification: The object-fit property specifies how the contents of a replaced element should be fitted to the box established by its used height and width. The key term being: fitted to the box established by its used height and width The image gets replaced, not its container. And the box established by its … Read more
IE11 needs the parent to have flex-direction: column. This example has your button rotated: #div { height: 200px; width: 50px; border: 1px solid black; display: flex; align-items: center; justify-content: center; flex-direction: column } #button { height: 50px; width: 200px; min-width: 200px; border: 1px solid black; background-color: red; transform: rotate(90deg); } <div id=”div”> <button id=”button”>HELLO</button> </div>
It’s curious that most browsers haven’t implemented column flex containers correctly, but the support for writing modes is reasonably good. Therefore, you can use a row flex container with a vertical writing mode. This will swap the block direction with the inline direction, and thus the flex items will flow vertically. Then you only need … Read more
Instead of display: flex on the container, use display: inline-flex. This switches the container from block-level (which takes the full width of its parent) to inline-level (which takes the width of its content). This sizing behavior is similar to display: block vs. display: inline-block. For a related problem and solution see: Make flex items take … Read more
If you’re looking to have just one element on the left and all others on the right, the simplest solution is to use justify-content:flex-end on the parent element to move all elements to the right and then add margin-right:auto to the element you want to have on the left .primary-nav { display:-webkit-flex; display:flex; list-style-type:none; padding:0; … Read more
I would use javascript or jquery to achieve this. My approach would be: get the offsetTop of the element using :first-of-type selector. use the each method of jquery to run through all elements and compare if offsetTop of $(this) is different of the offsetTop value you got on step1. gotcha Provide some code if you … Read more
If you use the correct properties and give the container a height, it will work. .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* CSS just to show the bounds */ border: 2px solid; background-color: #eee } <div class=”container”> <p>Lorem ipsum</p> </div>
I had similar problems with flexbox and box-sizing: border-box;. The latter one just doesn’t seem to work in IE. Width wouldn’t work in this case since padding will change it – but if you can use max-width, that should fix the problem.