fix(Tree): expand action area should not shrink when the content is o…

…versize, close #4689 (#4723)

* fix(Tree): [Tree] content whit long text align-right issue, close #4689

* chore(Tree): remove unnecessary css specificity  close #4689

* chore(Tree): ret test code,close #4689

* chore(Tree): update test code ,close #4689

---------

Co-authored-by: lancely <wb-lh589421@alibaba-inc.com>

components/tree/__tests__/index-spec.js

@@ -264,6 +264,21 @@ describe('Tree', () => {
         assertTree({ children: loop(dataSource), dataSource }, mountNode);
     });
 
+    it('should switcher ignore flex when node is long text', () => {
+        ReactDOM.render(
+            <Tree
+                selectable={false}
+                isLabelBlock
+                defaultExpandedKeys={['0-0', '0-0-0', '0-0-0-0']}
+            >
+                 <TreeNode key="2" className="long-text-node" label={<div style={{width: '200vw'}}>long text</div>} />
+            </Tree>,
+            mountNode
+        );
+        const switcher = document.querySelector('.long-text-node .next-tree-switcher');
+        assert(switcher && switcher.clientWidth);
+    });
+
     it('should ignore children contain null or string', () => {
         ReactDOM.render(
             <Tree checkable editable defaultExpandAll defaultSelectedKeys={['1']} defaultCheckedKeys={['3']}>

components/tree/main.scss

@@ -127,6 +127,7 @@
     }
 
     &-switcher.#{$css-prefix}noop-noline {
+        flex: none;
         width: $tree-switch-arrow-size;
         height: $tree-switch-arrow-size;
     }