Clip to the UI node's content box

crates/bevy_ui/src/layout/mod.rs

@@ -363,13 +363,16 @@ with UI components as a child of an entity without UI components, your UI layout
                 node.unrounded_size = layout_size;
             }
 
-            node.bypass_change_detection().border = BorderRect {
-                left: layout.border.left * inverse_target_scale_factor,
-                right: layout.border.right * inverse_target_scale_factor,
-                top: layout.border.top * inverse_target_scale_factor,
-                bottom: layout.border.bottom * inverse_target_scale_factor,
+            let taffy_rect_to_border_rect = |rect: taffy::Rect<f32>| BorderRect {
+                left: rect.left * inverse_target_scale_factor,
+                right: rect.right * inverse_target_scale_factor,
+                top: rect.top * inverse_target_scale_factor,
+                bottom: rect.bottom * inverse_target_scale_factor,
             };
 
+            node.bypass_change_detection().border = taffy_rect_to_border_rect(layout.border);
+            node.bypass_change_detection().padding = taffy_rect_to_border_rect(layout.padding);
+
             let viewport_size = root_size.unwrap_or(node.calculated_size);
 
             if let Some(border_radius) = maybe_border_radius {

crates/bevy_ui/src/ui_node.rs

@@ -58,6 +58,11 @@ pub struct Node {
     ///
     /// Automatically calculated by [`super::layout::ui_layout_system`].
     pub(crate) border_radius: ResolvedBorderRadius,
+    /// Resolved padding values in logical pixels
+    /// Padding updates bypass change detection.
+    ///
+    /// Automatically calculated by [`super::layout::ui_layout_system`].
+    pub(crate) padding: BorderRect,
 }
 
 impl Node {
@@ -175,6 +180,25 @@ impl Node {
             bottom_right: clamp_corner(self.border_radius.bottom_left, s, b.xw()),
         }
     }
+
+    /// Returns the thickness of the node's padding on each edge in logical pixels.
+    ///
+    /// Automatically calculated by [`super::layout::ui_layout_system`].
+    #[inline]
+    pub fn padding(&self) -> BorderRect {
+        self.padding
+    }
+
+    /// Returns the combined inset on each edge including both padding and border thickness in logical pixels.
+    #[inline]
+    pub fn content_inset(&self) -> BorderRect {
+        BorderRect {
+            left: self.border.left + self.padding.left,
+            right: self.border.right + self.padding.right,
+            top: self.border.top + self.padding.top,
+            bottom: self.border.bottom + self.padding.bottom,
+        }
+    }
 }
 
 impl Node {
@@ -186,6 +210,7 @@ impl Node {
         unrounded_size: Vec2::ZERO,
         border_radius: ResolvedBorderRadius::ZERO,
         border: BorderRect::ZERO,
+        padding: BorderRect::ZERO,
     };
 }
 

crates/bevy_ui/src/update.rs

@@ -79,8 +79,21 @@ fn update_clipping(
         // current node's clip and the inherited clip. This handles the case
         // of nested `Overflow::Hidden` nodes. If parent `clip` is not
         // defined, use the current node's clip.
+
         let mut node_rect =
             Rect::from_center_size(global_transform.translation().truncate(), node.size());
+
+        // Content isn't clipped at the edges of the node but at the edges of its content box.
+        // The content box is innermost part of the node excluding the padding and border.
+        //
+        // The `content_inset` should always fit inside the `node_rect`.
+        // Even if it were to overflow, this won't result in a degenerate clipping rect as `Rect::intersect` clamps the intersection to an empty rect.
+        let content_inset = node.content_inset();
+        node_rect.min.x += content_inset.left;
+        node_rect.min.y += content_inset.top;
+        node_rect.max.x -= content_inset.right;
+        node_rect.max.y -= content_inset.bottom;
+
         if style.overflow.x == OverflowAxis::Visible {
             node_rect.min.x = -f32::INFINITY;
             node_rect.max.x = f32::INFINITY;

examples/ui/overflow.rs

@@ -73,9 +73,11 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                                         top: Val::Px(25.),
                                         ..Default::default()
                                     },
+                                    border: UiRect::all(Val::Px(5.)),
                                     overflow,
                                     ..Default::default()
                                 },
+                                border_color: Color::BLACK.into(),
                                 background_color: GRAY.into(),
                                 ..Default::default()
                             })