flex布局中padding-right失效问题

最新推荐文章于 2025-05-22 11:40:48 发布

qq_251025116

最新推荐文章于 2025-05-22 11:40:48 发布

阅读量7.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/qq_24882601/article/details/103908565

前端专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了在使用Flex布局时，子元素超出父元素情况下padding-right失效的问题，并提供了解决方案。通过添加伪元素及调整样式，可以确保padding-right正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

相信大家在使用flex布局的时候都遇到一个问题，就是在子元素超出父元素的情况下，padding-left正常， padding-right失效问题，如下图：

那么要怎么解决这个问题呢？话不多说，直接贴代码：

CSS：

.container {
               display: flex;
               overflow: auto;
               border: 1px solid red;
               height: 100px;
               padding: 10px;
           }

           .container:after {
               content: '';
               display: block;
               width: 0px;
               height: 100%;
               border-right: 1px solid transparent;
           }

           .wrapper {
               display: flex;
               box-sizing: border-box;
               justify-content: space-between;
               width: 100%;
           }

           .wrapper div {
               border: 1px solid blue;
               flex: 0 0 20%;
               margin-right: 10px;
               height: 20px;
           }

HTML：

完整HTML代码：

<!DOCTYPE html>
<html lang="en">

   <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <meta http-equiv="X-UA-Compatible" content="ie=edge" />
       <title>Title</title>
       <style>
           * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
               overflow: auto;
           }

           .container {
               display: flex;
               overflow: auto;
               border: 1px solid red;
               height: 100px;
               padding: 10px;
           }

           .container:after {
               content: '';
               display: block;
               width: 0px;
               height: 100%;
               border-right: 1px solid transparent;
           }

           .wrapper {
               display: flex;
               box-sizing: border-box;
               justify-content: space-between;
               width: 100%;
           }

           .wrapper div {
               border: 1px solid blue;
               flex: 0 0 20%;
               margin-right: 10px;
               height: 20px;
           }
       </style>
   </head>