semantic-ui-react Make input use full width available

Question

I have the following Segment

<Segment className='AddAPIKey'>
                <Form>
                    <Form.Group>
                        <Form.Field>
                            <Input placeholder='XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX' />
                        </Form.Field>
                        <Form.Button color='green' floated='right' content='Add new API key' />
                    </Form.Group>
                </Form>
            </Segment>

With the style:

.ui.AddAPIKey {
  display: flex;
  justify-content: right;
}

Resulting in:

Is there a way I can make the input field take the entire width like in the example below? I've tried with width: 100% and auto and no luck.

Answer 1

import React from "react";
import { Input, Form, Segment } from "semantic-ui-react";
import "./style.css";

const InputExampleFocus = () => (
  <Segment>
    <Form>
      <Form.Group style={{ display: "flex" }}>
        <Form.Field style={{ flexGrow: "1" }}>
          <Input placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" />
        </Form.Field>
        <Form.Button color="green" floated="right" content="Add new API key" />
      </Form.Group>
    </Form>
  </Segment>
);

export default InputExampleFocus;

Try this I have removed the .ui.AddAPIKey class and used Inline css to style Form.Group and Form.Field

It produces an Input field that covers all the spaces available.

I hope it solves the issue.

https://codesandbox.io/embed/semantic-ui-example-forked-x5d4qm?fontsize=14&hidenavigation=1&theme=dark

Open the codesandbox and go to example.js