Flexbox 在页面右侧创建空白区域答案

【问题标题】：Flexbox creates blank space on the right of a pageFlexbox 在页面右侧创建空白区域
【发布时间】：2014-05-16 10:42:51
【问题描述】：

每当我移除柔性显示器时，它都会消失。无法理解那里发生了什么。一直在上下检查源，但似乎没有元素在那里伸展。

它的html

<div class="newheadwrap">
<div class="newlogo newhead">with contents</div>
<div class="newtagline newhead" >with contents</div>
<div class="mainhead newhead">with contents</div>
</div>

和css

.newheadwrap {
-o-display:flex;
-webkit-display:flex;
-ms-display:flex;
-moz-display:flex;
display:flex;  
flex-direction:row;
width:966px;
margin:0 auto;
}
.newlogo {
width:17%;
padding-top:43px;
}
.newtagline {
width:33%;  
color:white;
padding-top:93px;
font-family: berkeleyFont;
font-size:16px;
float:right !important;
}
.mainhead {
width:50%;
}

我知道不建议在这里发布实时链接，但在这种情况下小提琴不会这样做，所以，这里是一个链接 https://aps-direct.myshopify.com

【问题讨论】：

添加溢出：隐藏；到 .newheadwrap ，它将删除多余的空间

标签： html css flexbox

【解决方案1】：

删除当前页面右侧多余填充的一种方法：

将overflow: hidden; 添加到.newheadwrap

.newheadwrap {
-o-display: flex;
-webkit-display: flex;
-ms-display: flex;
-moz-display: flex;
display: flex;
flex-direction: row;
width: 966px;
margin: 0 auto;
overflow: hidden;
}

因此您有额外的空间：

.span9 {
width: 717px;
}

减少宽度，它会适合

【讨论】：

我以前做过，但后来弄乱了响应部分。只是静止不动，就像那里有固定像素宽度的东西一样。
额外的空间因为 .span9 { width: 717px; }