布局：＆＃34; 2列到最大宽度+居中包装＆＃34;使用拉伸选项

Question

我试图实现两列布局的变体，进入基本的最大宽度+居中包装（在移动设备上，第二列将堆叠在第一列之下）。 诀窍是，在更大的屏幕上，我希望第二列一直延伸到屏幕的右侧。

我使用 flexbox 和calc()实现了它，如果不支持calc()，它会回退到常规布局：

Sass：

$content-max-width: 500px;
$horiz-padding: 50px;
$minvw: $content-max-width + $horiz-padding * 2;
/* decorations */
body {  
  margin: 0;
  * { box-sizing: border-box; }
  .wrapper {
    & > * {
      border: solid 2px #666;
      min-height: 80vh;
    }
    .content {
      box-shadow: 0 3px 8px rgba(0, 0, 0, .25)
    }
    .main {
      min-height: 50vh;
      background-color: #bbffbb;
    }
    .expanded {
      background-color: #ffbbbb;
      > * {
        background-color: #ffffbb;
        height: 100%;
      }
    }
  }
}
/* mobile first */
.wrapper {  
  padding: 0 $horiz-padding;
  .content {
    max-width: $content-max-width;
    margin: 0 auto;
  }
}
/* large screen */
@media (min-width: $minvw) {
  .wrapper {
    display: flex;
    padding-right: calc(0px);
    .content {
      flex-grow: 1;
      display: flex;
      max-width: calc(99999px);      
      margin: 0 0 0 calc( (100vw - #{$content-max-width} - #{$horiz-padding}*2) * .5);
    }
  }
  .main {
    flex-basis: $content-max-width * .5;
  }
  .expanded {
    flex-grow: 1;
    > * {
      width: $content-max-width *.5;
    }
  }
}

和HTML标记：

<div class="wrapper">
  <div class="content">
    <div class="main">main...</div>
    <div class="expanded">
      <div>expanded...</div>
    </div>
  </div>
</div>

行动中：https://jsfiddle.net/leonsaysHi/uu6gg7uj/

我想知道是否有任何解决方案可以在不依赖calc()的情况下实现这一点，因为它尚未得到广泛支持。

非常感谢。

修改：您可以更改$ content-max-width的值，看看我的意思。

第二次修改：这是一张显示我想要实现的内容的图片：

Answer 1

您正在寻找的行为都是开箱即用或基金会开箱即用的。您可以使用列类在任一框架中轻松创建响应列。

<div class="col-md-3 col-sm-3 col-xs-12">First Column</div>
<div class="col-md-9 col-sm-9 col-xs-12">Second Column</div>

*这只是示例标记 - 您需要使用该文档来完全实现所需的功能。

更改代码中这些div的顺序将决定哪个显示在左侧/顶部。

W3Schools在bootstrap上有很多有用的文档