0

I have a flexbox container with row layout with three containers. The container on the right has the main content, and I want the left container to grow in height to match.

If I set the container's align-items to stretch it does what I want. However, I cannot use stretch due to circumstances outside of my control.

The only real options I have are center and flex-start. However, percentage heights for .left and .mid appear to be completely ignored with these align-items settings.

Is there any way to get the left container to grow with the parent's height other than switching to align-items: stretch?

.container {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  border: 1px solid black;
}
  
.left {
  width: 34%;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}
  
.mid {
  width: 3%;
  height: 100%;
  border: 1px solid green;
}
  
.right {
  border: 1px solid blue;
}
<div class="container">
  <div class="left">
    <div>Hello World!</div>
  </div>
  <div class="mid"></div>
  <div class="right">
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
    <div>Right content</div>
  </div>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Herms
  • 37,540
  • 12
  • 78
  • 101
  • without stretch you have the common issue of : % of what ? – Temani Afif May 01 '18 at 19:59
  • 1
    Are you allowed to use stretch on align-self? – Steven B. May 01 '18 at 20:07
  • You can try removing `align-items: flex-start;` property from `.container` or add `align-items: normal;` property to `.container` if it fits your requirements. – Prasad Kothavale May 01 '18 at 20:14
  • removing `align-items` causes it to use stretch/normal, which I can't do (for very complicated reasons) :( – Herms May 01 '18 at 20:50
  • The reason I'm restricted is that this CSS and DOM is the output of a custom template system that's being developed. I'm stuck with the options that template system gives me, which right now are just those two alignment options. I suspect I'll need to get `stretch` added as an alignment option to that system, but if there's a way to make it work without that it will be a lot easier. – Herms May 01 '18 at 20:53
  • Have you tried the solution in https://stackoverflow.com/questions/23090136/how-can-i-make-my-flexbox-layout-take-100-vertical-space – TylerH May 01 '18 at 20:53
  • And do you have the ability to use JavaScript here in this template system? But yes, ultimately you should make sure whoever is building this template system makes it support all of a given CSS module and not just parts of it. – TylerH May 01 '18 at 20:55
  • Like already mentioned, `.left {align-self: stretch}` is the way to go. – VXp May 01 '18 at 21:10
  • Javascript is generating the DOM from the template, so yes. But we're trying to avoid using JS to actually do layout (we do that for one other feature and it's a pain). `align-self` isn't something we can set through the system right now. It looks like we're just going to have to add a STRETCH alignment option to our templating system, which is what I expected was the case but had hoped there might be a simpler way. – Herms May 02 '18 at 20:49

0 Answers0