在特定宽度显示上，百分比宽度的flex列会留下1个1px的间隙 http://prntscr.com/gyhatt
<div class="rightside-table-container">
<div ng-repeat="d in organiser" ng-init="get_org_dtls(d.ref_No)"
id="cr-upper-div">
<div class="row" id="cr-upperdiv-firstrow">
<table class="table" id="cr-tableclass">
<tbody id="upperdiv-table-tbody">
<a href="#">
<tr id="cr-upperdiv-firsttr">
<td colspan="3">{{d.organiser_Name}}</td>
</tr>
</a>
<tr id="cr-upperdiv-secondtr">
<td data-toggle="modal" data-target="#myModal"
data-toggle="tooltip" title="Billed" id="cr-upperdiv-firsttd"><span>8</span></td>
<td data-toggle="modal" data-target="#myModal"
data-toggle="tooltip" title="On Hold" id="cr-upperdiv-secondtd">7</td>
<td data-toggle="modal" data-target="#myModal"
data-toggle="tooltip" title="Void Bill" id="cr-upperdiv-thirdtd">2</td>
</tr>
<tr id="cr-upperdiv-thirdtr">
<td ng-repeat="od in organiser_dtls_data"
ng-if="od.organiser_Code==d.ref_No"><md-button
ng-click="showCashregister($event)"
class="md-raised md-primary org_dtls_btn">
<div class="organiser_dtls_container md-ink-ripple">
<div class="org_head">
<p class="org_title">{{od.organiser_Details_Name}}</p>
</div>
<div class="org_mid">
<div class="org_loc">
<p class="org_loc_title">{{od.organiserLocation.organiser_Location_Name}}</p>
</div>
<div class="org_capacity">
<p class="org_cap_title">{{od.organiser_Capacity}}</p>
</div>
</div>
<div class="org_status">
<p class="org_status_title">Reserved</p>
</div>
</div>
</md-button></td>
</tr>
</tbody>
</table>
</div>
<div class="row" id="cr-upperdiv-secondrow">
<div class="merge" id="cr-mergeclass">
<div class="merge-icon">
<img class="Centered" src="/images/mergew.png" height="20px"
width="20px" />
</div>
<div class="merge-text">
<span>Merge</span>
</div>
</div>
<div class="split" id="cr-splitclass">
<div class="merge-icon">
<img class="Centered" src="/images/splitw.png" height="20px"
width="20px" />
</div>
<div class="merge-text">
<span>Split</span>
</div>
</div>
</div>
</div>
</div>
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
padding: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
background: red;
}
.g {
padding: 30px;
}
.grid-33 {
width: 33.3333%;
}
.grid-50 {
width: 50%;
}
.grid-66 {
width: 66.6666%;
}
.grid-100 {
width: 100%;
}
.white {
background: #fff;
}
.yellow {
background: #ffb401;
}
我已经尝试将grid-33设置为33.3334％并且它不起作用加上它没用，因为我正在使用框架并且不能使用＃34; nudge＆＃34;用于修复实际布局问题的特定列。我希望弹性框的尺寸就像显示表，其中px被四舍五入，但看起来并非如此。
感谢任何帮助。
答案 0 :(得分：2)
该问题是Chrome和Edge之间的错误（或舍入问题），但不包括Firefox。
我找到了2个解决方法，其中一个是将justify-content: space-between;添加到Flex容器中（仍然看起来在某些屏幕宽度的Chrome仍然存在1px问题）
Stack snippet
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
padding: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: red;
}
.g {
padding: 30px;
}
.grid-33 {
width: 33.3333%;
}
.grid-50 {
width: 50%;
}
.grid-66 {
width: 66.6666%;
}
.grid-100 {
width: 100%;
}
.white {
background: #fff;
}
.yellow {
background: #ffb401;
}<div class="wrapper">
<div class="container">
<div class="g white grid-66">
<p>Test</p>
</div>
<div class="g yellow grid-33">
<p>Test</p>
</div>
</div>
</div>
另一种方法是使用flex: 1 1 0 / flex: 2 2 0，其中flex-grow/flex-shrink是3的1和2的3，所以它们都会平均增长和缩小。
注意，使用它是很重要的，其中flex-basis设置为0，否则在可用空间将在项目之间分配之前，将考虑内容。< / em>的
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
padding: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
background: red;
}
.g {
padding: 30px;
}
.grid-33 {
width: 33.3333%;
flex: 1 1 0;
}
.grid-50 {
width: 50%;
}
.grid-66 {
width: 66.6666%;
flex: 2 2 0;
}
.grid-100 {
width: 100%;
}
.white {
background: #fff;
}
.yellow {
background: #ffb401;
}<div class="wrapper">
<div class="container">
<div class="g white grid-66">
<p>Test</p>
</div>
<div class="g yellow grid-33">
<p>Test</p>
</div>
</div>
</div>
答案 1 :(得分：1)
如果您愿意，可以保留width属性并与flex-grow一起使用flex的属性：
在您的情况下，我尝试使用 -
.grid-33 {
flex-grow: 3;
-webkit-flex-grow: 3;
}
.grid-66 {
flex-grow: 7;
-webkit-flex-grow: 7;
}
在我看来，如果有任何更改，您可以使用flex-grow值进行调整，它看起来相同。
html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
max-width: 1200px;
padding: 30px;
}
.container {
display: flex;
flex-wrap: wrap;
background: red;
}
.g {
padding: 30px;
}
.grid-33 {
flex-grow: 3;
-webkit-flex-grow: 3;
}
.grid-50 {
width: 50%;
}
.grid-66 {
flex-grow: 7;
-webkit-flex-grow: 7;
}
.grid-100 {
width: 100%;
}
.white {
background: #fff;
}
.yellow {
background: #ffb401;
}<div class="wrapper">
<div class="container">
<div class="g white grid-66">
<p>Test</p>
</div>
<div class="g yellow grid-33">
<p>Test</p>
</div>
</div>
</div>