Andd Inline Form Width of Children

Вам нужно изменить стиль ant-form-item-control-wrapper. Вы можете сделать это через CSS или через свойство Form.ItemwrapperCol.

Чтобы приведенное ниже работало, вам нужно обернуть SelectForm.Item в элемент с className = "select-container".

.select-container.ant-form-item-control-wrapper {
  width: 100%;
}

или

<Form.Item wrapperCol = {{ sm: 24 }} style = {{ width: "60%", marginRight: 0 }}>

sm ссылается на расположение столбцов, а 24 ссылается на контур.

Рабочий пример: https://codesandbox.io/s/w0voxxxzm5 (предполагается, что между кнопкой выбора и кнопкой не должно быть промежутка)

компоненты/InlineForm.js

import React, { PureComponent } from "react";
import { Button, Form, Select } from "antd";
const { Item } = Form;
const { Option } = Select;

const students = [
  {
    id: 1,
    fullName: "Bob Smith"
  },
  {
    id: 2,
    fullName: "Amber Johnson"
  }
];

class InlineForm extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        alert(JSON.stringify(values, null, 4));
      }
    });
  };

  render = () => {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form onSubmit = {this.handleSubmit} layout = "inline">
        <Item
          wrapperCol = {{ sm: 24 }}
          style = {{ width: "60%", height: 60, marginBottom: 0, marginRight: 0 }}
        >
          {getFieldDecorator("studentId", {
            rules: [{ required: true, message: "You must select a student" }]
          })(
            <Select style = {{ width: "100%" }}>
              {students.map(({ id, fullName }) => (
                <Option key = {fullName} value = {id}>
                  {fullName}
                </Option>
              ))}
            </Select>
          )}
        </Item>
        <Item wrapperCol = {{ sm: 24 }} style = {{ width: "40%", marginRight: 0 }}>
          <Button type = "primary" htmlType = "submit" style = {{ width: "100%" }}>
            Register
          </Button>
        </Item>
      </Form>
    );
  };
}

export default Form.create({ name: "inline-form" })(InlineForm);

У меня работал style = {{width:" 60% "}}, но в итоге я предпочел использовать style = {{flex: 1}}, так как в моем случае я делил <InlineForm/> на 3 поля.

Упрощенная версия крючков:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Button, Form, Select } from "antd";

const students = [
  { id: 1, fullName: "Bob Smith" },
  { id: 2, fullName: "Amber Johnson" }
];

const InlineForm = () => {
  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <Form onSubmit = {handleSubmit} layout = "inline">
      <Form.Item style = {{ width: "60%", height: 90, margin: 0 }}>
        <Select style = {{ width: "100%" }}>
          {students.map((student) => (
            <Select.Option key = {student.id} value = {student.id}>
              {student.fullName}
            </Select.Option>
          ))}
        </Select>
      </Form.Item>
      <Form.Item style = {{ width: "40%", marginRight: 0 }}>
        <Button type = "primary" htmlType = "submit" style = {{ width: "100%" }}>
          Register
        </Button>
      </Form.Item>
    </Form>
  );
};

const App = () => (
  <div>
    App using InlineForm
    <br />
    <InlineForm />
  </div>
);

ReactDOM.render(<App />, document.getElementById("container"));