我们希望在一个固定宽度的容器中，分左右两边，左边宽度固定大小，右边占满，使用flex布局时，如下：

对应代码如下：

左边盒子和右边盒子在都没有设置高度的情况下，它们是等高的（因为默认-> align-items:stretch，它们的高度在flex容器没有设置高度的情况下，将由左边盒子和右边盒子最高的高度决定。如果flex容器设置了高度，则高度与flex容器的高度保持一致）。如果左边盒子和右边盒子设置了高度，那么就是指定的高度。

这看上去并没有什么太大的问题，并且也实现了布局效果。

但是如果在右边 盒子里面放一个宽度为600px，高度为200px的黄色盒子，显然宽度已经超出了右边盒子的宽度，如下所示，我们看到左边的宽度不再是固定的300px了！是因为左边的默认flex-shrink:1，它的宽度会收缩。

对应代码如下：

我们可以给左边盒子添加flex-shrink:0，它把右边挤出去了，超出了父元素的宽度了。

我们可以给右边盒子添加添加over:hidden或overflow:auto处理，会有如下效果，这样就不会超出父容器的宽度了

再看一个案例，右边放的是代码，我们看到右边盒子又是超出了父元素的宽度

代码如下

@Override
public List listCategoriesBySearch(ConditionVO condition) {// 搜索分类List categoryList = categoryDao.selectList(new LambdaQueryWrapper().like(StringUtils.isNotBlank(condition.getKeywords()), Category::getCategoryName, condition.getKeywords()).orderByDesc(Category::getId));return BeanCopyUtils.copyList(categoryList, CategoryOptionDTO.class);
}
123

@Autowired
private CategoryDao categoryDao;
@Autowired
private ArticleDao articleDao;

同样的给右边盒子添加overflow:hidden，超出部分被隐藏了，如下图：

我们可以给里面的pre标签添加overflow-x:auto,如下

代码如下：

@Override
public List listCategoriesBySearch(ConditionVO condition) {// 搜索分类List categoryList = categoryDao.selectList(new LambdaQueryWrapper().like(StringUtils.isNotBlank(condition.getKeywords()), Category::getCategoryName, condition.getKeywords()).orderByDesc(Category::getId));return BeanCopyUtils.copyList(categoryList, CategoryOptionDTO.class);
}
123

@Autowired
private CategoryDao categoryDao;
@Autowired
private ArticleDao articleDao;

还有一种情况是，右边的内容是文字，但是文字超出宽度，需要显示省略号
参考：css列表示例&flex布局子元素超出父容器宽度问题

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.

 
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi in quos tempore consequatur perferendis velit et magnam odio exercitationem? Ab distinctio mollitia eaque pariatur dicta! Illo, laboriosam. At perferendis qui ducimus fuga, nesciunt et dicta, omnis reiciendis, numquam quasi quas quod mollitia necessitatibus possimus illo nostrum ad nobis totam animi.

再看一个示例

代码如下

我的风车我的风车我的风车我的风车我的风车我的风车
1000000篇