Question Force a container to only expand as much as its children require.

This is my problem:

Ignore the fake-parent, it's only there to set the root align-items to flex-start.

The container has a header and a body.

The header has an icon and a title.
The body has some description.

Icon is fixed-size (20x20) and I want the title to determine the width of the whole container.

If the description goes wider than that, it should wrap.

Can anyone please tell me how I can achieve this.

 

All the objects are either VisualElement or Labels. None of them have any inline styling.

This is the current USS file.

Code (CSharp):

1.  
2. #fake-parent {
3.     align-items: flex-start;
4. }
5.  
6. #subnode-header {
7.     flex-direction: row;
8.     align-items: flex-start;
9.     justify-content: flex-start;
10. }
11.  
12. #subnode-icon {
13.     background-image: resource('Icons/testicon');
14.     min-width: 20px;
15.     min-height: 20px;
16.     -unity-background-scale-mode: scale-to-fit;
17.     margin: 5px;
18. }
19.  
20. #subnode-title {
21.     font-size: 20px;
22.     -unity-font-style: bold;
23.     margin: 5px;
24. }
25.  
26. #subnode-description {
27.     white-space: normal;
28.     margin: 5px;
29. }
30.