Ширина группы ввода ant.design 100% от Col без разрывов линий

Question

У меня есть ant.design Input.Group с Select и Button.
Я хочу сделать их 100% от Col (любого размера).
следующий код, разбивающий строкумежду Select и Button https://codesandbox.io/s/peaceful-bogdan-2z8ot

   <Row>
    <Col span={6}>
      <Form.Item label="Label">
        <InputGroup style={{ width: "100%" }} compact>
          <Select style={{ width: "100%" }} placeholder="Select a person">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
          </Select>
          <Button icon="form" />
        </InputGroup>
      </Form.Item>
    </Col>
  </Row>

Мне нужно решение, которое подойдет для любого Colширина / пр.

Спасибо

Ссылка еще раз: https://codesandbox.io/s/peaceful-bogdan-2z8ot

Answer 1

Я не уверен, как это повлияет на ваш другой макет, но если вы в порядке с встроенным CSS, попробуйте добавить whiteSpace: 'nowrap' в стиле вашей группы ввода.

        <InputGroup style={{ width: "100%" }} compact>
          <Select style={{ width: "calc(100% - 32px)" }} placeholder="Select a person">
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="tom">Tom</Option>
          </Select>
          <Button icon="form" />
        </InputGroup>