Блог

Поэтому я пытаюсь создать макет с двумя экземплярами редактора monaco бок о бок. Я работаю с react и использую компонент @monaco-edior/react.

Я создал желаемый макет, используя гибкий макет в CSS:

Но когда я добавляю компонент редактора, макет полностью ломается:

Похоже, что происходит то, что редактор monaco слева увеличивается до некоторого внутренне определенного размера и обгоняет макет, который я определил в flex. Я не уверен, является ли это проблемой CSS с тем, как я написал макет, или это то, чего мне не хватает с точки зрения настройки компонента monaco.

Мой JSX выглядит так:

   <div className="container">
      <div className="item">
        <Editor
            onMount={this.editorDidMount}
        ></Editor>
      </div>
      <div className="item">
          <Editor
            onMount={this.editorDidMount}
          ></Editor>
      </div>
  </div>
 

И мой CSS выглядит так:

 html,
body {
    height: 100%;
    margin: 0px;
}

.container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #999;
    padding: 10px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: stretch;
}

.item {
    background-color: #efefef;
    flex-grow: 1;
}

.item   .item {
    margin-left: 10px;
}
 

Я довольно неопытен в react и CSS, что может быть причиной этого и где я мог бы начать искать решение?

Ширина по умолчанию monaco-react установлена на 100%, что означает, что она будет наследоваться от родительского контейнера. Если вы установите значение width равным .класс товара должен составлять 50%, тогда все должно работать так, как вы ожидаете.

Вот codesandbox с примером embeed