# flex-1的元素，其高度被子元素撑开的原因及解决方案

·  阅读 772

## 问题：

App // flex box, column
> title
> content // flex box, column
> content title
> content list // flex box, column. overflow-auto
> list item
> list item
> ...

titlecontent title也是定高的。

## 先说结论

1. 设置min-height: 0，而不是设置height: 0
2. 设置overflow: visible(只要不是auto就行）。

## 原因分析

### 为什么会content list的高度会撑开其父容器?

the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

In particular, if flex sizing is being used for a major content area of a document, it is better to set an explicit font-relative minimum width such as min-width: 12em. A content-based minimum width could result in a large table or large image stretching the size of the entire content area into an overflow zone, and thereby making lines of text gratuitously long and hard to read.Note also, when content-based sizing is used on an item with large amounts of content, the layout engine must traverse all of this content before finding its minimum size, whereas if the author sets an explicit minimum, this is not necessary. (For items with small amounts of content, however, this traversal is trivial and therefore not a performance concern.)

For min-width/min-height, specifies an automatic minimum size. Unless otherwise defined by the relevant layout module, however, it resolves to a used value of 0.

In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion. However, if the box has an aspect ratio and no specified size, its content-based minimum size is the smaller of its content size suggestion and its transferred size suggestion. If the box has neither a specified size suggestion nor an aspect ratio, its content-based minimum size is the content size suggestion.

content-base minimun size通常情况下是content size用户设值之间的最小值，如果有长宽比例限制再另做计算