Use glide with flexbox

Example project: https://codepen.io/dodozhang21/project/editor/DNxweB

I’m dynamically mout/destroy the glide based on breakpoints.

For breakpoint narrow desktop and higher, I need to add a right rail to the right of glide. So I used flexbox to create the layout. As the right rail width is fixed but the content width should flex.

.gridBContainer {
  @include narrow-desktop {
    display: flex;
    
    .galleryContainer {
      flex: 100 0 1px;
      margin-right: 20px;
    }
    
    .right {
      flex: 0 0 #{$right-rail-width};
      background: gray;
    }
  }
}

However it seems glide cannot figure out the width of the .galleryContainer without me explicitly setting a width on the container.

Is this a bug or am I doing something wrong?

[michaelspiss]

This can easily be fixed by setting the flex item’s min-width to 0. Example with inline css:

<div style="display: flex">
  <div style="flex: 1"</div>
  <div style="flex: 1; min-width: 0">
    <div class="glide">...</div>
  </div>
</div>

This happens because flex items have a min-width of auto - which messes with the calculations

[jiulongw]

Had the same issue. Setting explicit width kind of works but missed the flex part. After digging around I found a better solution for anyone who come across this.

The root cause is in flex box, JS code cannot figure out the correct width of a div. To solve this we can use an absolute positioned div to fill the flex div. We also need to use the aspect ratio hack to make the height of flex div correct.

Basically we need two wrapper divs.

<div class="flex-box">
  <div class="fixed-width"></div> <!-- e.g. thumbnail rail goes here -->
  <div class="flex-1-div">
    <div class="aspect-ratio-keeper"> <!-- wrapper 1 -->
      <div class="glide-wrapper"> <!-- wrapper 2 -->
        <div class="glide">...</div> <!-- actual glide goes here -->
      </div>
    </div>
  </div>
</div>

.aspect-ratio-keeper
  position: relative
  height: 0
  padding-top: 56.25% // use same aspect ratio for your slide

.glide-wrapper
  position: absolute
  left: 0
  right: 0
  top: 0
  bottom: 0