Div 未占满 Space

Question

问题

我遇到一个问题，在我的 div 上从某处设置了最大宽度，但我不确定它在哪里，因为我检查了我正在使用的样式包 ( Semantic UI) 以及我自己的内部样式，我无法找到它的派生位置（如图 1 所示，它在样式标签中，但这只是编译后的 Semantic UI 代码如图 2) 所示。 (图 1)

（图 2）

由于显示的问题，这是应用程序内部显示的内容

预期行为

这是预期的行为：（它占据了整个 space 而不是被限制）

代码

App.css

html,
body,
.app {
  height: 100vh;
  background: #eee;
  padding: 1em;
}

/* SidePanel.js */
.menu {
  padding-bottom: 2em;
}

/* Messages.js */
.messages {
  height: 70vh;
  overflow-y: scroll;
}

/* MessageForm.js */
.message__form {
  position: fixed !important;
  bottom: 1em;
  margin-left: 320px !important;
  left: 0;
  right: 1em;
  z-index: 200;
}

.emoijpicker {
  position: absolute;
}

/* Message.js */
.message__self {
  border-left: 2px solid orange;
  padding-left: 8px;
}

.message__image {
  padding: 1em;
}

Messages.js（部分内容因相关性未收录）

import { Segment, Comment } from "semantic-ui-react";
...

  render() {
    // prettier-ignore
    const { messagesRef, messages, channel, user, numUniqueUsers, searchTerm, searchResults, searchLoading, privateChannel, isChannelStarred, typingUsers, messagesLoading } = this.state;

    return (
      <React.Fragment>
        <MessagesHeader
          channelName={this.displayChannelName(channel)}
          numUniqueUsers={numUniqueUsers}
          handleSearchChange={this.handleSearchChange}
          searchLoading={searchLoading}
          isPrivateChannel={privateChannel}
          handleStar={this.handleStar}
          isChannelStarred={isChannelStarred}
        />

        <Segment>
          <Comment.Group className="messages">
            {this.displayMessageSkeleton(messagesLoading)}
            {searchTerm
              ? this.displayMessages(searchResults)
              : this.displayMessages(messages)}
            {this.displayTypingUsers(typingUsers)}
            <div ref={node => (this.messagesEnd = node)} />
          </Comment.Group>
        </Segment>

        <MessageForm
          messagesRef={messagesRef}
          currentChannel={channel}
          currentUser={user}
          isPrivateChannel={privateChannel}
          getMessagesRef={this.getMessagesRef}
        />
      </React.Fragment>
    );
  }
}

export default connect(
  null,
  { setUserPosts }
)(Messages);

Answer 1

正如教父在评论中建议的那样，我尝试覆盖 .ui class 并在 App.css 文件中添加了预期的行为：

App.css

...
.ui {
  max-width: 100% !important;
}
...

Div 未占满 Space

Div Not Taking Up Full Space

css

styling

reactjs

semantic-ui

semantic-ui-react

问题

预期行为

代码