我正在使用Vue.js和Vuetify( https://vuetifyjs.com/en/)构建一个Web应用程序.
我有一个简单的布局,有3列.但是,我希望3列填充页面的整个宽度,但是有一个自动的CSS强制最大宽度为960px.这是为什么？我怎样才能使用整个屏幕？你也可以在这里查看： https://codepen.io/mlikoga/pen/KeLNvy

<div id="app">
  <v-app>
    <v-content>
      <v-container ma-0 pa-0 fill-height>
        <v-layout row>
          <v-flex xs4> Chat List </v-flex>
          <v-flex xs4> Main Chat</v-flex>
          <v-flex xs4> User Profile</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

自动CSS：

@media only screen and (min-width: 960px)
.container {
  max-width: 960px;
}

容器的概念在网站布局中非常常见.默认情况下,Vuetify使用“固定”容器. “流体”容器将填充视口.

您可以在Vuetify容器< v-container>上将fluid prop设置为true：

<div id="app">
  <v-app>
    <v-content>
      <v-container fluid ma-0 pa-0 fill-height>
        <v-layout row>
          <v-flex xs4> Chat List </v-flex>
          <v-flex xs4> Main Chat</v-flex>
          <v-flex xs4> User Profile</v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</div>

以下是有关固定容器和流体容器的一些有用信息：https://www.smashingmagazine.com/2009/06/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

可以在此处找到其他Vuetify网格信息：
https://vuetifyjs.com/en/layout/grid

我正在尝试创建一个响应式布局，如果屏幕大小允许，则两个框彼此相邻，如果没有，则它们彼此相邻。如果盒子彼此相对，我希望他们以他们的父母为中心。我已经建立了一个jsfiddle来演示这个问题：

http://jsfiddle.net/leongersen/KsU23/

width: 50%;
min-width: 350px;
max-width: 100%;

尝试将“结果”窗格调整到350px以下。元素将与父母重叠。

我的问题：

为什么指定的最大宽度不能得到尊重，即使是在最小宽度之后呢？

我当然可以使用媒体查询，但我想知道为什么会发生这种情况。

因为 CSS standards：

The following algorithm describes how the two properties influence the
used value of the ‘width’ property:

1. The tentative used width is calculated (without ‘min-width’ and
   ‘max-width’) following the rules under “Calculating widths and
   margins” above.
2. If the tentative used width is greater than
   ‘max-width’,the rules above are applied again,but this time using
   the computed value of ‘max-width’ as the computed value for ‘width’.
3. If the resulting width is smaller than ‘min-width’,the rules above
   are applied again,but this time using the value of ‘min-width’ as
   the computed value for ‘width’.

像这样的最小宽度总是“赢”。在一个特定的CSS规则中，无论如何，无论如何，所有的值都以原子方式应用。优先级只有当不同的规则全部适用于同一个元素时才会发生，即使在考虑文件顺序之前，它也是基于特定的。