0

I am encountering a specific flexbox alignment problem only in Chrome:

In the following situation, which needs to be viewed on a large screen, the two DIVs at the right (those containing header and text) should be vertically centered inside their parent container and - since the image at the left determines the height of the parent - should align to the vertical center of the image.

The parent elements relevant settings are

.container_3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify content: center;
  height: 100%;
  max-height: 480px;
}

If I erase the max-height setting and set height to 480px instead of 100%, the content will center vertically also in Chrome. But in other browsers it works the way it is now, and I need that height/max-height combination for responsiveness...

Note: I left out the media queries, but the specific outer structure of three containers is due to responsiveness (the elements will wrap differently on smaller screens).

I also have that code in a codepen, but there's no difference to the code in the following snippet: https://codepen.io/anon/pen/MOLjBZ 

html,
body {
  height: 100%;
}
.container_1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  border: 1px solid green;
}
.container_1 img {
  display: block
}
.container_2 {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  border: 1px solid red;
}
.container_3 {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  max-height: 480px;
  width: 990px;
  border: 1px solid blue;
}
.container_3 > div {
  width: 480px;
  border: 1px solid yellow;
}
<div class="container_1">
  <div class="container_2">
    <div class="container_3">
      <div class="element_1>">
        <img src="http://placehold.it/400x400/dca?text=logo image"></div>
      <div class="element_2>">
        <h1>This is a Header</h1>
      </div>
      <div class="element_3>">
        <p>This text, including its header, should be vertically centered due to its parent elements setting "justify content: center". That element (".container_3", blue border) has "display: flex", "flex-direction: column" and "flex-wrap: wrap").</p>
        <p>This works in all browsers except Chrome...</p>
        <p>The relevant detail: ".container_3" has "height: 100%;" and "max-height: 480px;". If I erase the "max-height" setting and set "height" to 480px, the content will center vertically also in Chrome. But in other browsers it works the way it is now, and i need that max-height for responsiveness...</p>
      </div>
    </div>
  </div>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • 2
    The explanation of the problem, along with various solutions, are available here: https://stackoverflow.com/q/33636796/3597276 – Michael Benjamin Dec 02 '17 at 12:00
  • If you agree, I'll mark as a duplicate. – Michael Benjamin Dec 02 '17 at 12:01
  • @Michael_B thanks for pointing me to that other question (hadn't found it), but my problem is not "not filling 100% height of flex parent" but "not center-aligning". I don't see a solution for my problem there... As I wrote, i need that particular combination of settings to achieve responsiveness. I'll look into that answer some more, but I don't think it provides a solution to my particular problem. – Johannes Dec 02 '17 at 12:10
  • If you change to e.g. `vh` instead of `%`, the problem goes away...as is what is described at the dupe link, where using height with percent does not work properly: https://codepen.io/anon/pen/wPNoBx ... or add percent all the way: https://codepen.io/anon/pen/gXqLav – Asons Dec 02 '17 at 12:18
  • Also, using 2 extra containers as wrapper appears meaningless, unless they are suppose to contain something more, and if, then that needs to be a part of the problem description or else we can do little to help. – Asons Dec 02 '17 at 12:23
  • @LGSon Thanks for that tip (IMO that would have been an answer)! On large screens, it works now. Unfortunately, it doesn't work on smaller viewports, with the media queries I am using, but I'll probably work that out – Johannes Dec 02 '17 at 12:27
  • Thanks, and you're welcome :) ... I also think, even if `vh` is not explicit mentioned in the duplicate, it describes the issue well, and it also has all the points I made. – Asons Dec 02 '17 at 12:32
  • @LGSon As i wrote, I need those containers for resposiveness. It would really be asked too much to create a "minimal" working example of everything around it - it already took me quite some time to recreate the problem in this snippet, and it *does* reproduce the problem – Johannes Dec 02 '17 at 12:32
  • And as I wrote, if we are going to be able to help, we need to fully understand which role those extra containers are going to play...and as mentioned in the duplicate, if they e.g. would be flex _row_ containers, there might be another solution – Asons Dec 02 '17 at 12:36

0 Answers0