add Skeleton width guide to README Example (#178)

* add Skeleton width guide in README example

* fix: Skeleton width becomes 0 explanation

* Update README.md

* Improve the README section about `display: flex` parents

---------

Co-authored-by: Sam Magura <[email protected]>

Author: kwangminini

README.md

@@ -109,7 +109,7 @@ return (
         <tr>
             <td><code>count?: number</code></td>
             <td>
-                The number of lines of skeletons to render. If 
+                The number of lines of skeletons to render. If
                 <code>count</code> is a decimal number like 3.5,
                 three full skeletons and one half-width skeleton will be
                 rendered.
@@ -273,6 +273,29 @@ const wrapped2 = (
 );
 ```
 
+## Troubleshooting
+
+### The skeleton width is 0 when the parent has `display: flex`!
+
+In the example below, the width of the skeleton will be 0:
+
+```tsx
+<div style={{ display: 'flex' }}>
+  <Skeleton />
+</div>
+```
+
+This happens because the skeleton has no intrinsic width. You can fix it by
+applying `flex: 1` to the skeleton container via the `containerClassName` prop.
+
+For example, if you are using Tailwind, your code would look like this:
+
+```tsx
+<div style={{ display: 'flex' }}>
+  <Skeleton containerClassName="flex-1" />
+</div>
+```
+
 ### The height of my container is off by a few pixels!
 
 In the example below, the height of the `<div>` will be slightly larger than 30