Flex布局下子元素内容溢出不显示滚动条怎么办？

在Flex布局中，如果子元素的内容溢出并且希望显示滚动条，可以通过以下步骤来解决：

1. 设置父容器的overflow属性： 确保父容器的overflow属性设置为auto或scroll。这样当子元素内容溢出时，父容器会显示滚动条。

   .parent {
      display: flex;
      overflow: auto; /* 或者 overflow: scroll; */
   }
   

2. 设置子元素的flex属性： 子元素应该使用flex属性来控制其大小。通常，你可以将子元素的flex属性设置为1，这样它会占据剩余的空间。

   .child {
      flex: 1;
      overflow: auto; /* 或者 overflow: scroll; */
   }
   

3. 确保子元素的内容不会溢出： 如果子元素的内容本身也需要滚动条，确保子元素的overflow属性也设置为auto或scroll。

   .child {
      flex: 1;
      overflow: auto; /* 或者 overflow: scroll; */
   }
   

4. 示例代码： 以下是一个完整的示例代码，展示如何在Flex布局中处理内容溢出并显示滚动条。

   <div class="parent">
      <div class="child">
          <!-- 子元素内容 -->
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
          <p>这是一个很长的内容...</p>
      </div>
   </div>
   

   .parent {
      display: flex;
      height: 300px; /* 设置父容器的高度 */
      overflow: auto; /* 父容器显示滚动条 */
   }
   
   .child {
      flex: 1;
      overflow: auto; /* 子元素显示滚动条 */
   }
   

通过以上步骤，你可以在Flex布局中确保子元素内容溢出时显示滚动条。