CODEWITHSUNDEEP
htmlcssflexboxcentering
thatsamore
thatsamore

Reputation: 187

Horizontally center max-width flexbox item in remaining space

I have a rather unique situation that seemingly works in all browsers except for Internet Explorer 11 it seems, so that is the primary use case that I am attempting to solve.

I am working on an idea for a website layout that involves utilizing display: flex; on the <body> to accommodate a variety of layout situations. Specifically, one involves having a "navbar" to the side and the site's content to the left. Using flex-grow: 1; on the content allows me to fill the remaining space after the navbar, as well as automatically fill the full width of the browser window when I have to hide the navbar at a certain breakpoint.

However, if I add a max-width to the content and attempt to center that within the remaining space using margin: 0 auto;, it fails in Internet Explorer 11.

Here is a working example of this problem.

/* Code to Troubleshoot
// ----------------- */

body {
  display: -webkit-flex;
  display: flex;
}
nav {
  -webkit-flex-basis: 160px;
  flex-basis: 160px;
  z-index: 2;
}
main {
  -webkit-flex: 1;
  flex: 1;
  position: relative;
  min-width: 1px;
  max-width: 400px;
  margin: 0 auto;
  z-index: 1;
}
/* Presentational Styles
// ------------------ */

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  font-weight: 300;
  color: #bbb;
  background-color: #eaeaea;
}
nav,
main {
  height: 100vh;
  background-color: #fff;
  box-shadow: 0 0.15em 0.65em rgba(0, 0, 0, 0.15);
}
nav {
  counter-reset: linkCount;
}
nav i {
  display: block;
  border-bottom: 1px solid #eaeaea;
  padding: 0.925em 1em;
  font-style: normal;
  line-height: 1;
}
nav i:before {
  counter-increment: linkCount;
  content: "Link " counter(linkCount);
}
main:before {
  content: "Main Content";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
<nav>
  <i></i>
  <i></i>
  <i></i>
</nav>
<main></main>

Ultimately, all of the following are what I'm working towards:

  1. Content area always fills remaining space after navbar (and will continue to auto-fill if the navbar is hidden at a specific breakpoint).
  2. Need to be able to assign an optional max-width on the content area and center the content within the remaining space of the <body>. Currently I am attempting to do this via margin: 0 auto; on the content, which works in all browsers except Internet Explorer 11 it would seem (I have not yet tested on mobile, but all other desktop browsers seem to be in order).
  3. Content area needs to shrink normally if it ever gets small enough.

Upvotes: 4

Views: 9979

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

In terms of flex layout, IE 11 is full of bugs. But there are usually ways around them.

In this case, just make these two adjustments to your main element:

main {
  flex: 1 1 auto;     /* 1 */
  position: relative;
  min-width: 1px;
  max-width: 400px;
  margin: 0 auto;
  z-index: 1;
  width: 100%;        /* 2 */
}

revised fiddle

I based the adjustments on these two posts:

  1. flex property not working in IE
  2. Why IE11 doesn't wrap the text in flexbox?

Upvotes: 8

Related Questions