css媒体打印和转换chrome的奇怪问题

Question

嗨我有响应菜单从左右滑动，只剩下，或者它可以隐藏。所以主要内容是基于此的流动性。

我通过设置适当的margin-left和width属性使其变得流畅，如下所示：

    .main-container {
      width: 100%;
    }

    .main-content {
      width: 100%;
      margin-left: 0px;
    }

    .main-container:not(.menu-hidden) .main-content {
      width: calc(100% - 500px);
      margin-left: 250px;
    }

    @media (max-width: 1200px)  {
        .main-container:not(.menu-hidden) .main-content {
            width: calc(100% - 300px);
            margin-left: 300px;
        }
    }

    @media not print {
        .main-content {
            transition: width 1s, margin 1s;
        }
    }

    @media print {
      .main-content {
        width: 100% !important;
        margin-left: 0 !important;
        transition: none;
      }
    }

 <div class="main-container">
      <div class="main-content">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque acipsum elit. Donec malesuada purus quis mauris accumsan tempus. Sed ipsum tellus, ultrices posuere odio eget, aliquet convallis urna. Aliquam pulvinar consequat lectus, a gravida quam mattis sit amet. Curabitur molestie fringilla velit sed cursus. Donec a risus diam. In interdum porttitor sem.

          Nullam tincidunt lacus nec leo accumsan aliquet. Integer id justo et urna varius euismod ac non orci. Curabitur sed dignissim nibh, at consectetur augue. Maecenas id tortor id enim maximus laoreet. Etiam id aliquet odio. Integer vel nibh non sapien rhoncus consequat sit amet in nisi. Etiam condimentum vel tortor eu dignissim. Morbi sodales luctus libero non dictum. In fermentum elit et congue efficitur. Vestibulum nunc turpis, posuere vel odio ut, lobortis rutrum sem.
      </div>
    </div>

https://jsfiddle.net/z7hnstfx/2/

我还添加了介质打印，因此打印时没有边距。但是有了这个声明，如果屏幕宽度大于1200px，它在chrome中不起作用......

最奇怪的是，如果删除转换行或max-width媒体中的声明，它将起作用。我真的没想到它到底出了什么问题。有人可以帮忙吗？