Chrome/Safari Not Filling 100% Height of Flex Parent

.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>

Height: 100% Stopped Working When Run in Safari

For the first part of your question, making sure the green div aligns where you want, the answer is to make sure your CSS is working the way in production that you think it is.

Here's how to do that:

If something contextual is overriding your CSS or if there is another CSS source loading after yours, you can find out what is ruining it by inspecting the element using devtools in your browser.

It will show the hierarchy of applied CSS and you will be able to see and test what is overriding your CSS example, and find the source.

Check your interposed DIV (class MF6) between your flex-row and flex-col, you may need to put the flex-col as a direct descendent of the flex-row.

Also, some side notes that may be helpful as well:

• You have some inline CSS which may be better served with classes as well, depending on your exact situation
• Check out flex-end

For your second issue (not working on Safari), the answer is to make sure you have all the -webkit prefixes needed:

• You may need a -webkit prefix somewhere in there if you are getting results elsewhere but not in safari.

• You used to need display: -webkit-flex; to augment your display: flex;, not sure if still the case.

height:100% works in Chrome but not in Safari

Your flex container (.flex-box) has a defined height of 500px.

Your splitter (.handle-inner) has a defined height of 100%.

However, .handle, which exists between them, does not have a defined height. Safari sees this as a missing link, which it considers a violation of the spec, which essentially says:

The parent of an element with a percentage height must have a defined height and it must be with the height property. Otherwise, the element with a percentage height must default to height: auto (content height).

Therefore, you need to add height: 100% to .handle.

Also, in your body element, you not only have your .flex-box element, but you also have a nav element with height: 250px. Depending on how a browser handles the overflow (250px + 100%), this may cause your splitter element to disappear off-screen, which is happening in Safari.

To avoid that problem, make these adjustments to your code:

 * { box-sizing: border-box; }   /* include borders and padding in width
                                    and height calculations */

 .flex-box { height: calc(100% - 250px); } /* compensate for nav height */

revised demo

Also, being that body is a column-direction flex container, you can also use flex properties (such as flex: 1 on .flex-box) to consume remaining space. You may not even need percentage heights. See my answer here for details.

revised demo

Flex items not filling the height of its parent

Make sure the grid layout container has height of 100vh and the container you've shown also has height of 100%.
To center the text inside of each item, you can make each of them display: flex.

.grid-container {
    height: 100vh;
}


#container {
    height: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.item {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0px;
    font-size: 30px;
    background: #34ace0;
}

.flex-2 {
    display: flex;
    align-items: stretch;
}