Menu
I know there are a lot of bugs for flexbox in IE11 and I need some help to find the problem with the simple layout which I just made. I'm doing my development work on chrome...
This is not working on IE11 at all: https://codepen.io/anon/pen/ewwOGB
I was not successful with trying to "debug" the issue as I do not find the part which is causing the problem.
.parent {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.container.segment {
padding: 0 !important;
display: flex !important;
height: 100%;
max-height: 700px;
}
#navigation {
height: 100%;
width: 60px;
border-radius: 3px;
}
#navigation .menu {
writing-mode: tb;
writing-mode: tb-rl;
writing-mode: vertical-lr;
writing-mode: sideways-lr;
transform: rotate(180deg);
text-align: right;
border: 0 !important;
margin: 2em 0;
}
.ui.attached.menu {
width: 100% !important;
max-width: 100% !important;
}
#image {
height: 100%;
width: 400px;
background-color: #ccc;
}
#content {
height: 100%;
overflow-y: auto;
flex: 1;
padding: 2rem;
border-radius: 3px;
}<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
</head>
<body>
<div class="parent">
<div class="ui raised very padded container segment">
<div id="navigation">
<div class="ui attached stackable borderless menu">
<a class="item">
Item 1
</a>
<a class="item">
Item 2
</a>
<a class="item">
Item 3
</a>
<a class="item">
Item 4
</a>
<a class="item">
Item 5
</a>
<a class="item">
Item 6
</a>
</div>
</div>
<div id="image"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</body>
</html>
862
The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. The flexbox properties are supported in all modern browsers. To start using the Flexbox model, you need to first define a flex container.
You could also use SCSS mixins for all flexbox properties (1) or add this line in an IE10+ specific media query (2) which is more suitable if you really do have some specific hacks, not only flexbox related… these two are just a proposal so you can organize your code better.
If the increase in body content means the container reaches its maximum height, the body's vertical scrollbar is triggered. However in IE11, if the body content increases in height beyond the available space it (sometimes) extends out beyond the confines of the container (resizing the window sometimes triggers this issue and sometimes fixes it).
The flexbox properties are supported in all modern browsers. To start using the Flexbox model, you need to first define a flex container. The element above represents a flex container (the blue area) with three flex items. You will learn more about flex containers and flex items in the next chapters.
Its working in my IE11 perfectly except one thing that the navigation items are aligned to the bottom of the parent div.
For that give this css to div with navigation ID
#navigation{
display: flex;
align-items: flex-start;
}
Still then if you are facing issues try adding IE compatibility meta tag
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
If it not solving, please share the IE screenshots
86
Just add this to your code, shift the menu to the top by making the Link Elements Flex-Items and flex them to the right end:
#navigation .menu {
display: flex;
justify-content: flex-end;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
