[css] ellipsis with flexible width

export const Wrapper = styled.div`
    display: flex;
    width: 200px;
`;
export const Flex1Div = styled.div`
      flex: 1;
`;
export const Content = styled.div<{ shape?: GoalChildWidgetTypes }>`
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    & > * {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
`;

<Wrapper>
  <Flex1Div>
      <Content>
          ---------------------------------------------------------------------------------------------------------
      </Content>
  </Flex1Div>
 </Wrapper>