1

I'm trying to use two nested flex boxes to make a basic 2-column layout that fills the available space (here, hard-coded to a 300px by 300px yellow container), but the columns end up too tall (spilling outside the yellow). A summary of the code below:

  • The outer flex box (.columns) is horizontal, and appropriately splits up the horizontal space in half.
  • Each inner flex box contains two elements, a div containing an SVG element (.figure) and a div for a caption.
  • The .figure element has an align-self: stretch. Removing this fixes the problem.

* { box-sizing: border-box; }
.columns {
  width: 100%;
  display: flex;
  align-items: center;
}
.column {
  flex-basis: 0;
  flex-grow: 1;
  align-self: stretch;
  max-height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  border: cyan solid;
}
.figure {
  flex-basis: 0;
  flex-grow: 1;
  align-self: stretch;
  /* doesn't help: */
  display: flex;
  flex-direction: column;
}
svg {
  width: 100%;
  height: 100%;
  border: purple solid 3px;
}
.caption {
  border: magenta solid;
}
<div style="width: 300px; height: 150px; background: yellow">
  <div class="columns" style="height: 150px">
    <div class="column">
      <div class="figure">
        <svg viewBox="0 0 1 1"></svg>
      </div>
      <div class="caption">Caption</div>
    </div>
    <div class="column">
      <div class="figure">
        <svg viewBox="0 0 1 1"></svg>
      </div>
      <div class="caption">Caption</div>
    </div>
  </div>
</div>

I'm hopefully missing something simple to fix this, but having tried many additions (min-height: 0 in various places, for example), I keep getting the caption spilling outside the yellow box, without a manual workaround like <div class="column" style="height: calc(100% - 25px)"> to give space for the caption.

In case it matters, I'm testing on Chrome.

edemaine
  • 2,699
  • 11
  • 20
  • 1
    Have you tried making the `.figure` element a flex container? https://jsfiddle.net/Lr61yue9/ – Michael Benjamin Aug 11 '21 at 15:45
  • 1
    @MichaelBenjamin That does work in the fiddle; interesting. It's not working in my application, so let me try to make another MWE... – edemaine Aug 11 '21 at 15:52
  • 1
    Might help if you add images and borders, so we can differentiate the containers. – Michael Benjamin Aug 11 '21 at 15:57
  • I made two mistakes. The caption divs were supposed to be outside `.figure` but inside `.column`. And apparently 300x300 was a lucky aspect ratio. Changing to 300x150, it breaks again. Which I find weird. – edemaine Aug 11 '21 at 15:57
  • @MichaelBenjamin Added border boxes. Thanks for taking a look! – edemaine Aug 11 '21 at 16:00
  • Try adding `min-height: 0` to `.figure`. https://jsfiddle.net/b2ns0d1k/ – Michael Benjamin Aug 11 '21 at 16:09
  • That did it! If you make an answer (ideally with a link to the relevant explanation so I can understand for the future), I'll happily accept it. Thanks!! – edemaine Aug 11 '21 at 16:10
  • 1
    The solution is actually discussed at length in another post. So it's probably better that we close this question as a duplicate of that one. https://stackoverflow.com/q/36247140/3597276 – Michael Benjamin Aug 11 '21 at 16:17
  • 1
    Sadly, I read that post before making this one. I clearly didn't try adding `min-height: 0` in enough places though! Thanks for walking me through it. – edemaine Aug 11 '21 at 16:18
  • What I don't understand is why `min-height: auto` makes such a large height here. Maybe a side effect of `stretch`? – edemaine Aug 11 '21 at 16:20
  • 1
    Not exactly. The size is based on the SVG. (Remove the SVG. The element collapses.) – Michael Benjamin Aug 11 '21 at 16:22

0 Answers0