Height of flex item is wrong in Safari

问题:

In Safari, the element (div.header) with this layout doesn't calculate its height. In Chrome it works.

If you open this example in Safari, you will see that the height of the div.header is 48px (padding-top + padding-bottom).

If you open it in Chrome, the height will be normal (content + padding). How to fix this?

* {
  box-sizing: border-box;
}

.root {
  min-width: 1280px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

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

.header {
  width: 100%;
  background: yellow;
  padding: 24px 16px;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: flex-start;
}

.content {
  width: 100%;
  padding: 16px;
  background: red;
}

<div class="root">
  <div class="container">
    <div class="header">some content</div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Sed egestas egestas fringilla phasellus faucibus.
      Ac odio tempor orci dapibus ultrices. Sodales neque sodales ut etiam sit amet. Ultricies mi eget mauris pharetra et ultrices. Nec ullamcorper sit amet risus nullam eget felis eget. In arcu cursus euismod quis viverra nibh cras pulvinar. Pellentesque
      sit amet porttitor eget dolor morbi non. Consectetur a erat nam at lectus urna. Sit amet massa vitae tortor. Orci a scelerisque purus semper eget. Viverra mauris in aliquam sem fringilla ut morbi tincidunt augue. Lectus quam id leo in vitae turpis.
      Eget dolor morbi non arcu risus quis. Risus nec feugiat in fermentum posuere urna nec tincidunt praesent. Rhoncus aenean vel elit scelerisque mauris pellentesque. Tincidunt augue interdum velit euismod. Magna sit amet purus gravida quis blandit
      turpis cursus in. Vitae tempus quam pellentesque nec nam aliquam sem. Placerat vestibulum lectus mauris ultrices eros. Quis lectus nulla at volutpat diam. Eget mi proin sed libero enim sed. Lobortis mattis aliquam faucibus purus in massa tempor
      nec. Ut tellus elementum sagittis vitae et leo duis. Ipsum faucibus vitae aliquet nec ullamcorper sit. Aliquet enim tortor at auctor urna nunc. Cursus turpis massa tincidunt dui ut. Vitae nunc sed velit dignissim sodales ut eu sem integer. Ante
      metus dictum at tempor commodo ullamcorper a. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Est lorem ipsum dolor sit amet. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Tincidunt lobortis feugiat vivamus
      at augue eget arcu. Congue eu consequat ac felis donec et odio pellentesque. Turpis in eu mi bibendum neque egestas congue. Gravida quis blandit turpis cursus in hac habitasse platea dictumst. Sed euismod nisi porta lorem mollis aliquam ut porttitor
      leo. Neque volutpat ac tincidunt vitae semper quis lectus nulla. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Nisl pretium fusce id velit ut tortor. Sapien faucibus et molestie ac feugiat sed lectus vestibulum. Eu facilisis sed
      odio morbi quis. Suscipit tellus mauris a diam maecenas sed. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Ipsum nunc aliquet bibendum enim facilisis gravida neque. At ultrices mi tempus imperdiet nulla malesuada pellentesque
      elit eget. Velit aliquet sagittis id consectetur purus ut faucibus pulvinar elementum. Vestibulum lectus mauris ultrices eros in cursus. Ut enim blandit volutpat maecenas. Volutpat blandit aliquam etiam erat. Lacus suspendisse faucibus interdum
      posuere. Tempus egestas sed sed risus pretium quam vulputate. Dictumst quisque sagittis purus sit amet volutpat consequat. Nunc sed id semper risus. Eget mi proin sed libero. Condimentum vitae sapien pellentesque habitant. Volutpat commodo sed egestas
      egestas fringilla. Non sodales neque sodales ut. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla. Vitae elementum curabitur vitae nunc. Quisque sagittis purus sit amet volutpat consequat mauris. Tristique sollicitudin nibh sit amet
      commodo nulla facilisi nullam vehicula. Ac placerat vestibulum lectus mauris ultrices eros in. Hendrerit gravida rutrum quisque non tellus orci ac. Proin libero nunc consequat interdum varius sit amet mattis vulputate. Suspendisse faucibus interdum
      posuere lorem ipsum dolor sit amet consectetur. Egestas congue quisque egestas diam in arcu cursus euismod. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Gravida cum sociis natoque penatibus et magnis dis parturient. Mauris pharetra et
      ultrices neque ornare aenean euismod elementum nisi. Aliquam eleifend mi in nulla posuere sollicitudin. Condimentum lacinia quis vel eros. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Libero volutpat sed cras ornare arcu dui vivamus
      arcu. Non quam lacus suspendisse faucibus interdum posuere. Urna cursus eget nunc scelerisque. Facilisis volutpat est velit egestas. Neque egestas congue quisque egestas diam. Cum sociis natoque penatibus et magnis dis parturient. Commodo quis imperdiet
      massa tincidunt.
    </div>
  </div>
</div>

回答1:

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

Add this to your code:

.header { flex-shrink: 0 }