Question

例如，您不应该在这里看到父级的红色，但是您可以这样做，因为ClientRequest { domain: null, _events: { response: { [Function: g] listener: [Function] }, socket: { [Function: g] listener: [Function] } }, _eventsCount: 2, _maxListeners: undefined, output: [ 'GET /define.php?term=Bill HTTP/1.1\r\nHost: www.urbandictionary.com\r\nConnection: close\r\n\r\n' ], outputEncodings: [ 'binary' ], outputCallbacks: [ [Function: finish] ], outputSize: 88, writable: true, _last: true, chunkedEncoding: false, shouldKeepAlive: false, useChunkedEncodingByDefault: false, sendDate: false, _removedHeader: {}, _contentLength: 0, _hasBody: true, _trailer: '', finished: true, _headerSent: true, socket: null, connection: null, _header: 'GET /define.php?term=Bill HTTP/1.1\r\nHost: www.urbandictionary.com\r\nConnection: close\r\n\r\n', _headers: { host: 'www.urbandictionary.com' }, _headerNames: { host: 'Host' }, _onPendingData: null, agent: Agent { domain: null, _events: { free: [Function] }, _eventsCount: 1, _maxListeners: undefined, defaultPort: 80, protocol: 'http:', options: { path: null }, requests: {}, sockets: { 'www.urbandictionary.com:80:': [Object] }, freeSockets: {}, keepAliveMsecs: 1000, keepAlive: false, maxSockets: Infinity, maxFreeSockets: 256 }, socketPath: undefined, method: 'GET', path: '/define.php?term=Bill' }正在将父级的大小调整为其子级内容的自动宽度。你可以清楚地看到，它的内容的实际宽度是10px，所以它的自动调整大小也不应该使父10px也是如此吗？

parent: 0 0 auto

body{
  display:flex;
}

#parent {
  flex: 0 0 auto;
  background-color: red;
}

#child {
  flex: 0 0 10px;
  background-color: grey;
}


div{ display:flex; min-width:0; min-height:0; overflow:hidden; } /*There's some weirdness described here, http://stackoverflow.com/questions/36247140/why-doesnt-flex-item-shrink-past-content-size where flex elements default to min-width:auto, which could have caused problems here, but this doesn't change anything, so apparently this is not the issue*/

这发生在firefox和chrome中，因此可能会以某种方式证明正确。我想知道怎么做，所以我可以阻止它。

Answer 1

根据我对规范的理解，这是一个错误。

Michael_B所说的是正确的，首先#parent是大小的，一旦知道宽度，#child就可以弯曲。由于弯曲通常涉及生长或收缩，因此在弯曲柔性物品之前必须知道柔性容器的尺寸;并且flex项的最终大小可能不是flex基础，因此不应使用该值来调整flex容器的大小。

解决方案很简单：使用width代替flex-basis。 width不会弯曲，因此它不依赖于容器的宽度。因此，容器在调整大小时可以使用其内容的width。

body {
  display: flex;
}
#parent {
  flex: none;
  background-color: red;
}
#child {
  width: 10px;
  flex: none;
  background-color: grey;
}
div {
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

<div id="parent">
  <div id="child">childcontents</div>
</div>

那就是说，在你的情况下使用flex-basis应该可以工作。这是因为您的弹性项目具有零弹性增长因子和零弹性收缩系数。它不会生长也不会缩小，它会直接冻结。因此，在调整父级的大小时，可以使用flex-basis，并且规范是这样说的：

9.9.3. Flex Item Intrinsic Size Contributions

a的主要尺寸min-content / max-content contribution   flex item是外部 min-content / max-content size，   由flex base size作为最大值（如果不是）   可生长的）和/或至少（如果它不可收缩），然后   由min / max main size properties进一步限制。

不可弯曲的不可收缩的柔性物品的贡献被其柔性基部尺寸钳制为最大值和最小值。也就是说，贡献恰好是弹性基础大小，当弹性基础是明确的时，它被定义为弹性基础。

Answer 2

It looks like the flex layout algorithm calculates the width of the flex container before arriving at the width of the flex items.

Hence, it determines the auto size of #parent based on the full width of #child.

Then it sizes #child to flex-basis: 10px.

At his point, however, the auto width of the parent has already been determined and is inflexible.

Testing in Chrome, re-arranging the rules makes no difference, so it doesn't appear to be a cascading issue.

This is my view of the behavior without an official reference to back it up. You may find the precise answer here: W3C Spec: Flex Layout Algorithm

`flex-basis：auto` size parent就好像孩子是`flex-basis：auto`，当孩子是`flex-basis：10px`

2 个答案: