如果flex项目溢出flex容器，而不是打破线？ [英] Should flex item overflow the flex container instead of breaking lines?

问题描述

我有这种布局：

• A
  
  
  

  但是，Chrome不会打断行，因此flex项溢出flex容器：

  
  
  
  
  
  

  谁是对的？

  解决方案

  这是发生了什么：

  
  

  1. 线长确定算法确定灵活基本大小的Flex项目是其 max-content

     
     

     将项目大小设为可用空间，使用其使用的 flex
     basis 代替 main size ，将
     content 的值视为 max-content 。 [...] 弹力基座尺寸是
     该项目产生的主尺寸。 p>
     

  
  

  2. 由于没有最小和最大尺寸限制，因此假设主要尺寸是相同的值

     
     

     假想主尺寸< a>是项目的灵活基地大小
     根据其最小和最大主尺寸属性进行钳位。

     
     

  
  

  3. 解析灵活长度算法冻结不灵活的flex项，并设置 target main size 到其假设的主尺寸

     
     

     尺寸不灵活的项目。冻结，将其目标主要尺寸设置为
     假想主尺寸任何折射因子为零的项

     
     

  
  

  4. 最后， main size 也是该值：

     
     

     设置每个项目的已使用主尺寸更改为其目标主尺寸 。

     
     

  
  

  因此，您的flex项目的大小应该与< c $ c> flex-basis：max-content 。 Chrome，Edge和IE会正确无误。

  
  
  

  相反，Firefox的大小似乎与 flex-basis：fit-content 。 IMO这个更合理，但它不是标准。 错误876985 应该解决此问题。

  
  
  

  同时，为了在Firefox上实现标准行为，您可以使用

    flex-basis ：-moz-max-content; 
    

    .flex-container {display：flex; width：175px; border：3px solid black; margin-bottom：10px;}。flex-item {flex：none; flex-basis：-moz-max-content; border：3px solid blue; margin：3px;}。box {display：inline-block; vertical-align：middle; width：100px; height：100px; border：3px solid red; margin：3px;}  

   < div class = -container> < div class =flex-item> < div class =box>< / div> < div class =box>< / div> < / div>< / div>  

  
  
  

  你希望Firefox在其他浏览器上的行为不那么容易。

  
  
  

  Chrome不支持 fit-content flex-basis ，但它在 width （前缀）

    Flex-basis：auto; 
   width：-webkit-fit-content; 
   width：fit-content; 
    

    .flex-container {display：flex; width：175px; border：3px solid black; margin-bottom：10px;}。flex-item {flex：none; width：-webkit-fit-content; width：fit-content; border：3px solid blue; margin：3px;}。box {display：inline-block; vertical-align：middle; width：100px; height：100px; border：3px solid red; margin：3px;}  

   < div class = -container> < div class =flex-item> < div class =box>< / div> < div class =box>< / div> < / div>< / div>  

  
  
  

  / Edge不支持 fit-content 。但是最大限制应该在所有浏览器上都有效。

    max-width：100％; 
   box-sizing：border-box; / * Include paddings and borders * / 
    

  请注意，约束不会包含边距，因此您可能需要使用 calc 更正百分比，例如 max-width：calc（100％ - 6px）。

  
  
  

    .flex-container {display：flex; width：175px; border：3px solid black; margin-bottom：10px;}。flex-item {flex：none; max-width：calc（100％ -  6px）; box-sizing：border-box; border：3px solid blue; margin：3px;}。box {display：inline-block; vertical-align：middle; width：100px; height：100px; border：3px solid red; margin：3px;}  

   < div class = -container> < div class =flex-item> < div class =box>< / div> < div class =box>< / div> < / div>< / div>  

  I have this layout:

  • A row flex container with a definite size, e.g. width: 175px
  • A flex item
    • With an indefinite flex-basis, e.g. flex-basis: content
    • Which is inflexible, e.g. flex: none.
    • Whose max-content size is larger than the available space
    • Whose min-content size is smaller than the available space

  .flex-container {
    display: flex;
    width: 175px;
    border: 3px solid black;
    margin-bottom: 10px;
  }
  .flex-item {
    flex: none;
    border: 3px solid blue;
    margin: 3px;
  }
  .box {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    border: 3px solid red;
    margin: 3px;
  }

  <div class="flex-container">
    <div class="flex-item">
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>

  As expected, Firefox breaks lines inside the flex item and sets its width to the available space.

  However, Chrome doesn't break lines and thus the flex item overflows the flex container:

  Who is right? How can I fix this?

  解决方案

  This is what happens:

  1. The Line Length Determination algorithm determines that the flex base size of the flex item is its max-content

     Size the item into the available space using its used flex basis in place of its main size, treating a value of content as max-content. [...] The flex base size is the item’s resulting main size.

  2. Since there are no min nor max size constraints, the hypothetical main size of the flex item is the same value

     The hypothetical main size is the item’s flex base size clamped according to its min and max main size properties.

  3. The Resolving Flexible Lengths algorithm freezes the inflexible flex item and sets its target main size to its hypothetical main size

     Size inflexible items. Freeze, setting its target main size to its hypothetical main size any item that has a flex factor of zero

  4. Finally, the main size is that value too:

     Set each item’s used main size to its target main size.

  Therefore, your flex item should be sized as if it had flex-basis: max-content. Chrome, Edge and IE do it correctly.

  Instead, Firefox seems to size as if it had flex-basis: fit-content. IMO this is more reasonable, but it's not standard. Bug 876985 should fix this.

  Meanwhile, to achieve the standard behavior on Firefox you can use

  flex-basis: -moz-max-content;
  

  .flex-container {
    display: flex;
    width: 175px;
    border: 3px solid black;
    margin-bottom: 10px;
  }
  .flex-item {
    flex: none;
    flex-basis: -moz-max-content;
    border: 3px solid blue;
    margin: 3px;
  }
  .box {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    border: 3px solid red;
    margin: 3px;
  }

  <div class="flex-container">
    <div class="flex-item">
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>

  Instead, if you want Firefox's behavior on other browsers, it's not that easy.

  Chrome doesn't support fit-content on flex-basis, but it does on width (prefixed)

  flex-basis: auto;
  width: -webkit-fit-content;
  width: fit-content;
  

  .flex-container {
    display: flex;
    width: 175px;
    border: 3px solid black;
    margin-bottom: 10px;
  }
  .flex-item {
    flex: none;
    width: -webkit-fit-content;
    width: fit-content;
    border: 3px solid blue;
    margin: 3px;
  }
  .box {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    border: 3px solid red;
    margin: 3px;
  }

  <div class="flex-container">
    <div class="flex-item">
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>

  However, IE/Edge doesn't support fit-content anywhere. But a max constraint should work on all browsers

  max-width: 100%;
  box-sizing: border-box; /* Include paddings and borders */
  

  Note the constraint won't include margins, so you may need to correct the percentage using calc, e.g. max-width: calc(100% - 6px).

  .flex-container {
    display: flex;
    width: 175px;
    border: 3px solid black;
    margin-bottom: 10px;
  }
  .flex-item {
    flex: none;
    max-width: calc(100% - 6px);
    box-sizing: border-box;
    border: 3px solid blue;
    margin: 3px;
  }
  .box {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    height: 100px;
    border: 3px solid red;
    margin: 3px;
  }

  <div class="flex-container">
    <div class="flex-item">
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>

  这篇关于如果flex项目溢出flex容器，而不是打破线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！