CODEWITHSUNDEEP
htmlcssflexboxsafari
Felipe Sartori
Felipe Sartori

Reputation: 13

Flex element inside another flex element collapses on Safari

I got this code working on Chrome where the content of first flex-item needs to be aligned to the bottom and stretches if necessary:

body {
  height:100vh;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.flex-container {
  padding: 0;
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.flex-item {
  background: tomato;
  padding: 10px;
  border: 5px solid red;
  flex: 0 1 auto;
}

.flex-stretch {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1 1 auto;
}
<div class="flex-container">
  <div class="flex-item flex-stretch">1</div>
  <div class="flex-item">2<br>2<br>2<br>2<br>2<br>2<br>2<br>2</div>
  <div class="flex-item">3</div>
</div>

but on Safari it doesn't respect the content of the first flex-item and collapses if the viewport is smaller than the flex-container and scrolling is necessary.

Is there any work around this issue?

Thanks, this is my first question here :)

Here is the codePen: https://codepen.io/felphos/pen/GRZVKwY

Upvotes: 1

Views: 485

Answers (1)

pappaschris
pappaschris

Reputation: 36

Since you use flexbox you shouldn't define the height explicitly. I think that removing height: "100%" and also setting .flex-stretch{flex: 1 0 auto;} (0 flex-shrink) will get you what you want.

Upvotes: 2

Related Questions