如何从 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

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

How do I remove the offset from an item with no width in IE?

css

internet-explorer

internet-explorer-11