1

I can't seem to get this flex + overflow combination working in Safari.

JSFiddle: https://jsfiddle.net/9dtrr84c/2/

<div class="container-fluid">
  <div class="row parent">
    <div class="col-12 col-sm-7 left">
      <div class="row top">
        <div class="col">Top</div>
      </div>
      <div class="row bottom">
        <div class="col-sm-7 my-list-container">
          <ul class="list-group">
            <div class="list-group-item dummy-item">Dummy item</div>
            <div class="list-group-item dummy-item">Dummy item</div>
            <div class="list-group-item dummy-item">Dummy item</div>
          </ul>
        </div>
        <div class="col-sm-5 flex-end">
          This should be flex end
        </div>
      </div>
    </div>
    <div class="hidden-xs-down col-sm-5 right">
    </div>
  </div>
</div>

And css:

/* With bootstrap v4 */
/* https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css */

html,
body,
.container-fluid,
.parent {
  height: 100%;
}

.dummy-item {
  height: 300px;
}

.left {
  display: flex;
  flex-direction: column;
}

.left .top {
  flex-shrink: 0;
}

.left .bottom {
  flex-shrink: 1;
  flex-basis: 100%;
  display: flex;
}

.my-list-container {
  overflow-y: auto;
}

.flex-end {
  align-self: flex-end;
}

The list should expand to take as much space as possible and overflow with a scrollbar.

This works in Chrome as expected. Doesn't seem to be a "flex not supported in this version of Safari" as I am using 10.1.2. I don't require old browser support so a modern solution is acceptable

Any help is appreciated! Many thanks in advance!

spxcxlxxs
  • 57
  • 8

1 Answers1

1

Managed to solve it: https://jsfiddle.net/9dtrr84c/8/

  • Added flex-wrap: nowrap; to parent container
spxcxlxxs
  • 57
  • 8