如何在flex div中包含div

Question

我试图创建一个基于百分比的div - 并尝试在div中包含div。我希望中心（xyz div）只有从content-div获得的大小的90％（高度）。

我想要＆＃34;内容＆＃34; div响应中心div的90％高度（页眉和页脚之间）。现在 - 它根据浏览器大小拍摄。

我的代码是https://jsfiddle.net/thbx4pv2/

CSS

html,
body {
  height: 100%;
  margin: 0
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
    font-size: 4em;

}

.box .row {
  border: 1px dotted grey;
  flex: 0 1 30px;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}


.xyz {
    position: absolute;
  margin: 10 10 10 10  ;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
  height: 90%;
    overflow: auto;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

HTML

    <div class="box">
  <div class="row header">
    <p><b>header</b>
  </div>
  <div class="row content">
    <div class="xyz">
    <p>
      <b>content</b> (fills remaining space)
    </p>
    </div>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Answer 1

删除位置属性并对 xyz 类

执行以下更改

margin: 10px auto 10px auto;
width: 90%;

Answer 2

.xyz {
width: 70%;
box-shadow: 0 0 30px;
text-align:center;
-webkit-flex: 18 0 0; 
flex: 18 0 0; 
}

再次检查配偶。 这样，如果您愿意，可以将页眉和页脚固定为高度。 Html被更改，询问是否更改不清楚，现在它确实完全符合您的要求，边框仅用于展示目的。 由于溢出，字体大小设置得非常小。 如果这是理想的解决方案，请告诉我。

http://codepen.io/damianocel/pen/XmxmQE

Answer 3

如果你想使用position: absolute;，你需要定位你希望它定位的元素。

在您的情况下，将.content{position: relative;}添加到您的CSS中。

Updated fiddle使用较小的字体大小。