Flexbox项目不收缩

Question

我有4个盒子，我想随着窗口的大小而调整大小。方框1将收缩，但是方框2、3和4不。我在做什么错？

.contents {
  display: flex;
  justify-content: flex-end;
  min-width: 0px;
}
.contents div:first-child {
  flex-grow: 1;
  padding: 5px;
}
.contents div {
  border-left: 1px solid red;
  flex-shrink: 1;
  min-width: 0px;
  overflow: hidden;
  padding: 5px 100px;
}

<div class="contents">
  <div>1 Really long text goes in here, really long text goes in here.</div>
  <div>2 Lorem</div>
  <div>3 Ipsum</div>
  <div>4 Dolor</div>
</div>

http://codepen.io/anon/pen/pen/oppdmq?editors=1100#0

谢谢。

Answer 1

您在每个项目的左侧和右侧都有100px填充（padding: 5px 100px）。那是不灵活的宽度的200px。改用此方法：

.contents div {
  border-left: 1px solid red;
  flex: 0 1 200px; /* can't grow, can shrink, start at 200px width */
  min-width: 0px;
  overflow: hidden;
  padding: 5px;
  text-align: center;
}

修订的codepen

Answer 2

如果要使用填充物，您将无法实现所需的效果，因为无论您的屏幕尺寸是多少，它都会占用那么多空间。因此，在这种情况下，您需要使用介质断点来更改填充物或根据屏幕的大小更改Flex属性。