flex布局中子元素寬度平均分配，并且當子元素內容超出時，子元素本身出現滾動條實現方法：
- 將父元素設置為display: flex，以啟用Flexbox布局。
- 將每個子元素的flex屬性設置為1，以使其寬度平均分配。
- 設置子元素的overflow屬性為auto，以在內容超出時出現滾動條。
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Flexbox Example with Scroll</title><style>.container {display: flex;width: 200px; /* 給容器設置寬度以便觀察滾動效果 */}.item {flex: 1; /* 每個子元素寬度平均分配 */overflow: auto; /* 當內容超出時出現滾動條 */border: 1px solid #999999;}.content {width: 300px; /* 給內容設置寬度以便觸發滾動條 */}</style>
</head>
<body><div class="container"><div class="item"><div class="content">超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字</div></div><div class="item"><div class="content">超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字</div></div><div class="item"><div class="content">超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字超級多的文字</div></div></div>
</body>
</html>效果如圖：
