为什么Flex项目缩小不超过内容大小？ [英] Why doesn't flex item shrink past content size?

问题描述

我有4个flexbox列，一切都很好，但是当我添加一些文本到列，并将其设置为一个大的字体大小，它使得列比它应该由于flexbox设置更宽。

我尝试使用 word-break：break-word ，它帮助了，但是当我将列调整到非常小宽度，文本中的字母分成多行（每行一个字母），但列的宽度不会小于一个字母的大小。

尝试观看此视频： http ：//screencast-o-matic.com/watch/cDetln1tyT
（在开始，第一列是最小的，但是当我调整窗口大小，它是最宽的列。我只是想尊重flex设置总是... flex尺寸1：3：4：4）

JSFiddle： https://jsfiddle.net/78h8wv4o/3/

  .container {display：flex; width：100％}。col {min-height：200px; padding：30px; word-break：break-word} .col1 {flex：1;背景：橙色; font-size：80px} .col2 {flex：3; background：yellow} .col3 {flex：4; background：skyblue} .col4 {flex：4;背景：红色}  

 < div class = > < div class =col col1> Lorem ipsum dolor< / div> < div class =col col2> Lorem ipsum dolor< / div> < div class =col col3> Lorem ipsum dolor< / div> < div class =col col4> Lorem ipsum dolor< / div>< / div>  

我知道，将字体大小和列填充设置为更小将有助于...但是有其他解决方案吗？

不使用 overflow-x：hidden 。

解决方案

这是默认设置，可防止弹性项目从 缩小超过其内容的大小（不考虑其他灵活因素，例如 flex-shrink 或 flex-basis ）

默认值为...

• min-width：auto


• min-height：auto / ul>
  
  

  ...分别用于行方向和列方向上的flex项目。

  
  
  

  通过将flex项设置为默认值：

  
  
  
  
  
  • min-width：0
  
  
  • min-height：0
  
  
  • overflow：hidden （或任何其他值，可见除外）
  
  
  
  
  

  ---

  
  
  
  /www.w3.org/TR/css-flexbox-1/#min-size-autorel =nofollow noreferrer> 4.5。 Flex的默认最小大小
  项
  
  $ b $ p

  为了提供更灵活的默认最小大小，
  规范引入了一个新的 auto 值作为
  的初始值 min-width 和 min-height 在CSS 2.1中定义的属性。

  
  

  c $ c> auto value ...

  
  
  

  
  

  $ c> overflow 是在主轴上的 visible ，当在flex项目的主轴min-size属性上指定时，指定自动最小尺寸。否则计算 0 。

  
  

  换句话说：

  
  
  
  
  
  • min-width：auto 和 / code>默认值仅适用于溢出为可见。
  
  
  • 如果 overflow 值是其他值，则min-size属性的值为 0 。
  
  
  • 因此， overflow：hidden 可以替代 min-width：0 code> min-height：0 。
  
  
  
  
  

  b
  $ b

  
  
  • 最小尺寸算法仅适用于主轴。
  
  
  • 例如，行方向容器不会获得 min-height：auto 。
  
  
  • 更多详细信息：在弹性方向上以不同的方式缩小最小宽度渲染：行和弹性方向：列
  
  
  
  
  

    .container {display：flex;}。col {min-height：200px; padding：30px; word-break：break-word} .col1 {flex：1;背景：橙色; font-size：80px; min-width：0; / * NEW * /}。col2 {flex：3; background：yellow} .col3 {flex：4; background：skyblue} .col4 {flex：4;背景：红色}  

   < div class = > < div class =col col1> Lorem ipsum dolor< / div> < div class =col col2> Lorem ipsum dolor< / div> < div class =col col3> Lorem ipsum dolor< / div> < div class =col col4> Lorem ipsum dolor< / div>< / div>  

  
  
  

  修改了小提琴

  
  
  

  浏览器兼容性说明

  
  
  

  如规格中所述，<$ c $ min-width 和 min-height 属性的值 auto 。这意味着一些浏览器在默认情况下仍然可以呈现一个 0 值，因为它们在更新值之前实现了flex布局，因为 0 是中的 min-width 和 min-height /www.w3.org/TR/CSS2/visudet.html#min-max-widthsrel =nofollow noreferrer> CSS 2.1 。 一个此类浏览器是IE11。其他浏览器已更新为较新的 auto 中定义的值 flexbox spec 。

  
  

  I have 4 flexbox columns and everything works fine, but when I add some text to column and set it to a big font size, it is making the column wider than it should be due to flexbox setting.

  I tried to use word-break: break-word and it helped, but still, when I resize the column to a very small width, letters in the text are broken into multiple lines (one letter per line) but the column does not get smaller width than one letter size.

  Try to watch this video: http://screencast-o-matic.com/watch/cDetln1tyT (at start, first column is the smallest, but when I resized window, it is the widest column.I just want to respect flex settings always.. flex sizes 1 : 3 : 4 : 4)

  JSFiddle: https://jsfiddle.net/78h8wv4o/3/

  .container {
    display: flex;
    width: 100%
  }
  .col {
    min-height: 200px;
    padding: 30px;
    word-break: break-word
  }
  .col1 {
    flex: 1;
    background: orange;
    font-size: 80px
  }
  .col2 {
    flex: 3;
    background: yellow
  }
  .col3 {
    flex: 4;
    background: skyblue
  }
  .col4 {
    flex: 4;
    background: red
  }

  <div class="container">
    <div class="col col1">Lorem ipsum dolor</div>
    <div class="col col2">Lorem ipsum dolor</div>
    <div class="col col3">Lorem ipsum dolor</div>
    <div class="col col4">Lorem ipsum dolor</div>
  </div>

  I know, setting font size and column padding to smaller will help... but is there any other solution?

  I can not use overflow-x: hidden.

  解决方案

  You're bumping up against the minimum sizing algorithm of flex items.

  This is a default setting that prevents a flex item from shrinking past the size of its content (regardless of other flex factors, such as flex-shrink or flex-basis).

  The defaults are...

  • min-width: auto
  • min-height: auto

  ...for flex items in row-direction and column-direction, respectively.

  You can override these defaults by setting flex items to:

  • min-width: 0
  • min-height: 0
  • overflow: hidden (or any other value, except visible)

  ---

  From the specification:

  4.5. Implied Minimum Size of Flex Items

  To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1.

  With regard to the auto value...

  On a flex item whose overflow is visible in the main axis, when specified on the flex item’s main-axis min-size property, specifies an automatic minimum size. It otherwise computes to 0.

  In other words:

  • The min-width: auto and min-height: auto defaults apply only when overflow is visible.
  • If the overflow value is something else, the value of the min-size property is 0.
  • Hence, overflow: hidden can be a substitute for min-width: 0 and min-height: 0.

  and...

  • The minimum sizing algorithm applies only on the main axis.
  • For example, a flex item in a row-direction container does not get min-height: auto by default.
  • More details here: min-width rendering differently in flex-direction: row and flex-direction: column

  .container {
      display: flex;
  }
  
  .col {
      min-height: 200px;
      padding: 30px;
      word-break: break-word
  }
  
  .col1 {
      flex: 1;
      background: orange;
      font-size: 80px;
      min-width: 0; /* NEW */
  }
  
  .col2 {
      flex: 3;
      background: yellow
  }
  
  .col3 {
      flex: 4;
      background: skyblue
  }
  
  .col4 {
      flex: 4;
      background: red
  }

  <div class="container">
      <div class="col col1">Lorem ipsum dolor</div>
      <div class="col col2">Lorem ipsum dolor</div>
      <div class="col col3">Lorem ipsum dolor</div>
      <div class="col col4">Lorem ipsum dolor</div>
  </div>

  revised fiddle

  Browser compatibility note:

  As noted in the spec, the auto value for the min-width and min-height properties is "new". This means that some browsers may still render a 0 value by default, because they implemented flex layout before the value was updated and because 0 is the initial value for min-width and min-height in CSS 2.1. One such browser is IE11. Other browsers have updated to the newer auto value as defined in the flexbox spec.

  这篇关于为什么Flex项目缩小不超过内容大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！