Height of Flex Item Is Wrong in Safari

Height of flex container not working properly in Safari

As stated in another answer about Safari problems with flexbox, because flex is relatively new (CSS3), not all browsers work as expected. In some browsers, flex layout is partially supported or fully botched, depending on the combination of properties you apply.

In this particular case, Safari simply refuses to acknowledge max-height: 400px on the flex container. However, if the flex container isn't responding, you can get help from the parent.

This is where you are now:

section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 400px; /* not working in Safari */
  width: 400px;
  padding: 10px;
  border: 1px solid green;
}

Try this instead:

body {
    display: flex;
    max-height: 400px;
}
section {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 400px;
  padding: 10px;
  border: 1px solid green;
}

body {

    display: flex;

    max-height: 400px;

}

section {

  display: flex;

  flex-direction: column;

  flex-wrap: wrap;

  width: 400px;

  padding: 10px;

  border: 1px solid green;

}

div {

  height: 100px;

  width: 100px;

  background-color: red;

  margin: 10px;

}

<section>

  <div></div>

  <div></div>

  <div></div>

  <div style="height:200px"></div>

  <div></div>

  <div></div>

  <div></div>

</section>

Height of flex item is wrong in Safari

There's an issue with Safari where you need to define flex-shrink.

Add this to your code:

.header { flex-shrink: 0 }

Chrome / Safari not filling 100% height of flex parent

Solution

Use nested flex containers.

Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align. Avoid absolute positioning. Just stick with flexbox all the way through.

Apply display: flex to the flex item (.item), making it a flex container. This automatically sets align-items: stretch, which tells the child (.item-inner) to expand the full height of the parent.

Important: Remove specified heights from flex items for this method to work. If a child has a height specified (e.g. height: 100%), then it will ignore the align-items: stretch coming from the parent. For the stretch default to work, the child's height must compute to auto (full explanation).

Try this (no changes to HTML):

.container {

    display: flex;

    flex-direction: column;

    height: 20em;

    border: 5px solid black

}

.item {

    display: flex;                      /* new; nested flex container */

    flex: 1;

    border-bottom: 1px solid white;

}

.item-inner {

    display: flex;                      /* new; nested flex container */

    flex: 1;                            /* new */

    /* height: 100%;                    <-- remove; unnecessary */

    /* width: 100%;                     <-- remove; unnecessary */

    /* display: table;                  <-- remove; unnecessary */  

}

a {

    display: flex;                      /* new; nested flex container */

    flex: 1;                            /* new */

    align-items: center;                /* new; vertically center text */

    background: orange;

    /* display: table-cell;             <-- remove; unnecessary */

    /* vertical-align: middle;          <-- remove; unnecessary */

}

<div class="container">

  <div class="item">

    <div class="item-inner">

      <a>Button</a>

    </div>

  </div>

  <div class="item">

    <div class="item-inner">

      <a>Button</a>

    </div>

  </div>

  <div class="item">

    <div class="item-inner">

      <a>Button</a>

    </div>

  </div>

</div>

Why is my Flexbox layout not working properly in Safari 15 and in Chrome?

Couple of problems:

1. if you want both columns to be 50% width on all screen sizes, you need to set flex:1 1 50% on both the p and the img tags.
2. if you want the img tag to scale up and down instead of always being it's full size, you need to set width:100%;height:auto on it.
3. if you want to center the two elements vertically all you need is align-items:center on their container (where display:flex is defined) and not use any vertical padding on them

As a matter of personal preference I would set display:block on both the p and img tags, or better yet wrap them in tags to prevent any weirdness from what styles some browsers could put on them.

Code:

<div class="container4">
  <p class="element4">Drummer and beat producer from Gothenburg, based in Oslo. The beats are built around Pers drumming,<br />using samples from a wide variety of genres <br />mixed with other sounds.</p>
  <img class="element4-2" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/29841/dog.jpg" alt="wall2" />
</div>

<style>
.container4 {
  font-size: 40px;
  display: flex;
  align-items: center;
  gap: 50px;
}
.element4 {
  padding-left: 50px;
  flex: 1 1 50%;
}

.element4-2 {
  padding-right: 50px;
  flex: 1 1 50%;
  width:100%;height:auto;
}
</style>

Codepen: https://codepen.io/nonsintetic/pen/poWygaY (tested on Safari and Chrome on a mac with latest everything)

Flexbox child exceeding its height in Safari

It seems like height: 100%; on #center is the cause here. Instead you can use align-items: stretch; on the parent and then flex the children to center their contents:

#body {
  background: #CCC;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  display: flex;
  align-items: stretch;
  height: 100%;
  width: 100%;
}

#body > * {
  display: flex;
  align-items: center;
}

#center {
  background: #BBB;
  flex: 1;
  max-width: 800px;
  margin: 0 20px;
  align-items: flex-start;
}

Codepen here.

Safari flex child horizontal scrollbar over content (incorrect content height)

Adding height: fill-available; to the .item's seems to fix the issue.

.item {
    height: 100%;
    height: -webkit-fill-available;
}

Edit:
Removed -moz-fill-available and fill-available as they are not neccessary to fix the issue in Safari and are breaking layout in Firefox.

Furthermore note that in Safari, you have to use -webkit-fill-available for all children of .item if you want them to have height based on their parent (.item), which creates further issues.

---

Related Topics