CSS 在一行上实现灵活但宽度有限的填充内容部分

Question

我想制作一个具有灵活对称填充的响应式 div 和一个增长到最大宽度并收缩到最小宽度的内容区域，如下所示:

 <-A-> <------------------ B -----------------> <-A->
+-----+----------------------------------------+-----+
|     |                                        |     |
|     |                                        |     |
|     |                                        |     |
|     |                                        |     |
|     |                                        |     |
|     |                                        |     |
+-----+----------------------------------------+-----+
<------------------------- W ------------------------->

我想要的是一个能让我满意的 CSS 解决方案:

A is at least 10px
B is as big as possible but no bigger than 1366px
B is no smaller than 300px
W = B + ( A * 2 ) always

我认为这对于 Google 来说是一件相对简单的事情，但我发现想出一个好的方法非常具有挑战性。我最终的结果似乎比应有的更难(我的 CSS 中媒体查询和 calc() 调用的组合)。

是否有一个简单的方法/技巧来完成我所描述的操作，或者只是应用正确的媒体查询集和覆盖样式来获得所需的效果？

.out {
  background: blue;
  height: 200px;
}

.in {
  background: red;
  width: calc(100% - 20px);
  height: 100%;
  margin: 0 auto;
  display: block;
}

@media only screen and (min-width: 1366) {
  .in {
    width: 1346px;
  }
}

<div class="out">
  <div class="in">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.    
  </div>
</div>

基本上我想防止红色区域的宽度小于 300px 或大于 1366px。如果它的宽度大于 1366px，我希望填充围绕它对称增长。我想也许我已经明白了？

Answer 1

我认为你的布局可以使用 CSS Grid 来实现。

您可以使用minmax()设置您的列。

示例:

.out {
  background: blue;
  height: 200px;
  display: grid;
  grid-template-columns: minmax(10px, 1fr) minmax(300px, 1366px) minmax(10px, 1fr);
}

.in {
  background: red;
  grid-column: 2;
}

<div class="out">
  <div class="in">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>