diff --git a/src/components/SingleValue.js b/src/components/SingleValue.js
index <HASH>..<HASH> 100644
--- a/src/components/SingleValue.js
+++ b/src/components/SingleValue.js
@@ -23,7 +23,7 @@ export const css = ({ isDisabled }: State) => ({
   color: isDisabled ? colors.neutral40 : colors.text,
   marginLeft: spacing.baseUnit / 2,
   marginRight: spacing.baseUnit / 2,
-  maxWidth: '100%',
+  maxWidth: `calc(100% - ${spacing.baseUnit * 2}px)`,
   overflow: 'hidden',
   position: 'absolute',
   textOverflow: 'ellipsis',
diff --git a/src/components/containers.js b/src/components/containers.js
index <HASH>..<HASH> 100644
--- a/src/components/containers.js
+++ b/src/components/containers.js
@@ -64,6 +64,7 @@ export const valueContainerCSS = ({ maxHeight }: ValueContainerProps) => ({
   overflowY: 'auto',
   padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`,
   WebkitOverflowScrolling: 'touch',
+  position: 'relative',
 });
 export class ValueContainer extends Component<ValueContainerProps> {
   shouldScrollBottom: boolean = false;
fix for overflowing long values in SingleValue and ValueContainer