diff --git a/x-pack/packages/security-solution/distribution_bar/README.md b/x-pack/packages/security-solution/distribution_bar/README.md
new file mode 100644
index 0000000000000..51edea2dd1846
--- /dev/null
+++ b/x-pack/packages/security-solution/distribution_bar/README.md
@@ -0,0 +1,10 @@
+# Security Solution's Distribution Bar
+
+The DistributionBar component visually represents data distribution, such as critical, high, medium, and low alerts.
+
+## Storybook
+
+General look of the component can be checked visually running the following storybook:
+`yarn storybook security_solution_packages`
+
+Note that all the interactions are mocked.
\ No newline at end of file
diff --git a/x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx b/x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx
index f2d1099d17c50..c4395ba1d13d1 100644
--- a/x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx
+++ b/x-pack/packages/security-solution/distribution_bar/src/distribution_bar.tsx
@@ -36,6 +36,7 @@ const useStyles = () => {
         position: relative;
         border-radius: 2px;
         height: 5px;
+        min-width: 10px; // prevents bar from shrinking too small
       `,
       empty: css`
         background-color: ${euiTheme.colors.lightShade};