媒体查询无法识别弹性项目的宽度 属性

Question

所以我有一个 3 列布局，但由于某种原因在我的中间列（代码段中的文本列）它一直从边缘到边缘，即使我的宽度为 .middle 设置为 70%。

Divs 和 p 是块级元素，但我不太清楚为什么它们在我的媒体查询中指定后保持 100% 宽度，您可以在代码底部找到。

我希望 p 元素在两侧有一些空间。

有问题的 class 是媒体查询中的最后一个列表。

body {
  background-color: green;
}
html,
body {
  height: 100%;
}
.container {
  display: flex;
  position: absolute;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  min-height: 100vh;
  width: 70%;
  margin: auto;
  background-color: white;
  border: 1px solid yellow;
}
.left {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: space-around;
  order: 1;
  //flex: 1 20%;
  width: 25%;
}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  //flex: 2 20%;
  width: 50%;
  height: 100%;
}
.right {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  align-content: flex-start;
  justify-content: center;
  order: 3;
  width: 25%;
  //flex: 1 50%;

}
div.list {
  display: flex;
  flex-flow: row wrap;
  width: 70%;
  justify-content: center;
  line-height: 300%;
  ;
  border: 1px solid pink;
}
.right .list {
  // text-align: center;
  height: auto;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
.headbox h3 {
  color: orange;
}
#bigwrap {
  height: 100%;
}
.container {
  display: flex;
  //position: absolute;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  min-height: 70vh;
  width: 70%;
  margin: 5% auto 8% auto;
  background-color: white;
}
.container p {
  margin-bottom: 12%;
}
.container img {
  margin-bottom: 10%;
}
.container img:first-child {
  margin-top: 5%;
}
.middle p:first-child {
  margin-top: 8%;
}
.left,
.middle,
.right {
  // border-right: 1px solid blue;

}
.left img {
  max-width: 100%;
}
.middle {
  display: flex;
  flex-flow: column wrap;
  order: 2;
  flex: 2 20%;
}
.right .list {
  height: auto;
}
.list ul {
  list-style: none;
  padding: 0;
}
.list a {
  text-decoration: none;
  color: inherit;
}
.headbox h3 {
  color: orange;
}
.right .headbox {
  border: 1px solid orange;
  width: 70%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media all and(max-width: 800px) {
  #nav {
    justify-content: space-around;
  }
}
@media all and (max-width: 500px) {
  #nav {
    flex-direction: column;
    /*updated*/
    margin-bottom: 7%;
  }
  #nav ul {
    padding-left: 0;
    /*added*/
  }
  #nav li {
    flex: 1 1 100%;
    /*updated*/
    padding: 5px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
  }
  #nav li a {
    text-align: center;
    padding: 5px;
    margin: 5px;
  }
  .box img {
    max-width: 100%;
    margin-bottom: 9%;
  }
  #bigwrap {
    width: 100%;
    border: 1px solid gray;
  }
  .container {
    flex-flow: row wrap;
    height: 100%;
    width: 100%;
  }
  .left,
  .right {
    flex: 1 100%;
  }
  .middle {
    width: 70%;
  }
}

<div id="bigwrap">
  <div class="container">
    <div class="left">
      <img src="cat1.jpeg" alt="Picture of kid" width="100px" height="100px">
      <img src="cat1.jpeg" alt="Picture of kid" width="100px" height="100px">
    </div>
    <div class="middle">
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
      <div class="box">
        <p>
          Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text. Sample text.
        </p>
      </div>
    </div>
    <div class="right">
      <div class="headbox">
        <h3>Visit Us</h3>
      </div>
      <div class="list">
        <ul>
          <li><a href="#">Home</a>
          </li>
          <li><a href="#">Hours</a>
          </li>
          <li><a href="#">Plan</a>
          </li>
          <li><a href="#">Directions</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 1

是的，您在媒体查询中将 .middle 设置为 width: 70%。

但是您还在代码的较高位置将 .middle 设置为 flex: 2 20%。

此规则不在媒体查询中，因此始终应用。它计算为：

• flex-grow: 2
• flex-shrink: 1
• flex-basis: 20%

当您的媒体查询启动时，width: 70% 会覆盖 flex-basis: 20%。

但是 flex-grow: 2 和 flex-shrink: 1 仍然完好无损，因为没有什么可以阻止它们。

因此，浏览器首先应用 width: 70%，然后是 flex-grow: 2，这会消耗掉线上剩余的任何 space。 （因此，内容扩展 "edge to edge"。）

在您的媒体查询中进行此调整：

而不是...

.middle { width: 70%`; }

使用

.middle { flex: 0 0 70%; }

或

.middle { width: 70%; flex-grow: 0; flex-shrink: 0; }

这将覆盖其他声明的所有组件。