相关疑难解决方法(0)

我正在尝试calc()在Sass样式表中使用该函数,但我遇到了一些问题.这是我的代码:

$body_padding: 50px

body
    padding-top: $body_padding
    height: calc(100% - $body_padding)

如果我使用文字50px而不是我的body_padding变量,我会得到我想要的.但是,当我切换到变量时,这是输出:

body {
    padding-top: 50px;
    height: calc(100% - $body_padding); }

我怎样才能让Sass认识到它需要替换calc函数中的变量？

如果我创建一个带有2个子项和列流的flexbox,并将第二个子项设置为第二个子项,flex-grow 1则展开以填充flexbox.这有效

(ps:不想用safari支持来混淆这个例子,所以使用Chrome或Firefox)

* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  color: white;
}
#outer {
  display: flex;
  flex-flow: column;
  height: 100%;
}
#top { 
  background-color: red;
}
#bottom {
  background-color: blue;
  flex: 1 0 auto;
}

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">bottom (blue)</div>
</div>
  

但是,如果我然后将一个孩子#inside放在里面#bottom并将其高度设置为100%,即使Flexbox已拉伸,它也不会增加其高度以匹配#bottom.

添加了CSS

#inside {
  background-color: green;
  height: 100%;
}

HTML

<div id="outer">
  <div id="top">top</div>
  <div id="bottom">
    <div id="inside">inside</div>  <!- added -> …

我需要有2列divs.

右列将具有随机内容,其可具有1行或100行.

我想在没有javascript的情况下跟踪右列的高度.

我在尝试这个:

<div>
   <div style="display:inline-block; width:30%; vertical-align:top; height:100%; background:#FF0000;">
   </div>
   <div style="display:inline-block; width:30%; vertical-align:top;">
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
      <div>CONTENT</div>
   </div>
</div>

问题是左列总是高度为0px,它应该显示一个与右列相同大小的红色列.

那么如何使用div做到这一点？

编辑

Rick Hitchcock的回答非常好,但不适用于Firefox.还有其他建议吗？