Блог

Я пытаюсь сделать два дива определенного размера внутри моей страницы реакции jsx. Я использую flex box в css. на моей домашней странице у меня есть родительский div домашней страницы, а затем внутри этого div у меня есть два дочерних div. мой css-файл выглядит так. .App-это основная часть, затем у меня есть .домашняя страница, которая является моим основным div, а затем вложена в .домашняя страница-левый контейнер и .домашняя страница-правый контейнер. Я бы хотел, чтобы левый контейнер занимал 80% страницы, а правый контейнер занимал 20%, но если вы смотрите на свой штраф, я бы хотел, чтобы flexbox работал так, чтобы оба дива выглядели так, как будто они находятся друг на друге по телефону.

 .App {
  max-width: 900px;
  min-height: 100vh;
  margin: 0;
  margin: auto;
}

.home-page {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: auto;
  text-align: center;
}

.home-page-left-container {
  display: flex;
  min-height: 60vh;
  width: 80%;
  padding: 10px;
  float:left;
}
.home-page-right-container {
  padding: 10px;
  background: beige;
  width: 20%;
  float:left;
}