如何从IE中没有宽度的项目中删除偏移量？

Question

我有一个没有宽度的div（在需要时给它一个宽度但是否应该在流量之外）。它有一个兄弟div，填充10px。该填充为第一个div产生一个偏移量，即使它本身没有宽度或填充，也会以某种方式将它放入流中。

这只是IE中的一个问题，我想在第二个div上保留填充。我怎么能做到这一点？

以下是显示问题的代码笔：http://codepen.io/justindaniel/pen/wMxXeW

<div class="parent">
  <div class="first"></div>
  <div class="second">hi</div>
</div>


* {
  box-sizing: border-box;
}

.parent {
  display: flex;
  width: 75%;
  flex-wrap: wrap;
  display: flex;
  flex-basis: 25%;
  border: none;
  flex-grow: 0;
  flex-grow: initial;
  width: auto;
  align-self: flex-start;
  padding: 10px;
  margin-bottom: 10px;
  overflow: auto;
  position: relative;
}

.first,
.second {
  height: 100px;
  background: red;
  }

.first {
  flex-basis: 0%;
}

.second {
  display: flex;
  flex-basis: 100%;
  border: none;
  flex-grow: 0;
  flex-grow: initial;
  width: auto;
  align-self: flex-start;
  flex-wrap: wrap;
  padding: 10px;
  margin-bottom: 10px;
  overflow: auto;
  position: relative;
  }

Answer 1

事实证明这是IE 10-11的一个已知问题。

https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box