Как я могу поставить два <div>, которые имеют одинаковую ширину и высоту рядом друг с другом без необходимости прокрутки?

Question

В настоящее время я делаю простую страницу html с двумя разделами с содержимым внутри каждого из них, но последнее содержимое второго div .right располагается внизу страницы и делает страницу прокручиваемой.

Я попытался сделать еще один div и поставить flex-direction: column, но он не работает:

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: column;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
}

.right {
  background: #ffffff;
  width: 50%;
  height: 100vh;
}

<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
</div>

Как можно поместить два <div>, которые имеют одинаковую ширину и высоту, рядом друг с другом без необходимости прокрутки?

Answer 1

Попробуйте отображать flex только на большом экране и блокировать на мобильном телефоне

body {
  margin: 0;
}

.main-container {
  display: flex;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
  padding:20px;
}

.right {
  background: #ddd;
  width: 50%;
  height: 100vh;
  padding:20px;
}

/* For mobile screen 
@media only screen and (max-width: 768px) {
  .main-container{
    display: block;
  }
  .left, .right{
    width: 100%;
  }
}
*/

<div class="main-container">
    <div class="left">
      <h2>content</h2>
    </div>
    <div class="right">
      <h2>content should be on top</h2>
    </div>
   </div>

Answer 2

Вам нужно использовать flex-direction: row, а не flex-direction: column.

Чтобы избежать повторения width: 50%; height: 100vh; для .left и .right, я бы также создал другой класс, например .box , который применяется к обоим и содержит эти свойства.

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.box {
  width: 50%;
  height: 100vh;
}

.left {
  background: #ecece9;
}

.right {
  background: #ffffff;
}

<div class="main-container">
  <div class="left box">
    <h2>content</h2>
  </div>
  <div class="right box">
    <h2>content should be on top</h2>
  </div>
 </div>

Answer 3

Используйте CSS Сетка для построения макетов, она очень мощная. Смотрите, я изменил только две строки, и макет готов.

   .main-container {
  display: grid;
  grid-template-columns: 50% 50%
}

body {
  margin: 0;
}

.main-container {
  display: grid;
  grid-template-columns: 50% 50%
}

.left {
  background: #ecece9;
  height: 100vh;
}

.right {
  background: #ffffff;
  height: 100vh;
}

<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
 </div>

Answer 4

Изменение направления изгиба от столбца к строке

body {
  margin: 0;
}

.main-container {
  display: flex;
  flex-direction: row;
}

.left {
  background: #ecece9;
  width: 50%;
  height: 100vh;
}

.right {
  background: #ffffff;
  width: 50%;
  height: 100vh;
}

<div class="main-container">
  <div class="left">
    <h2>content</h2>
  </div>
  <div class="right">
    <h2>content should be on top</h2>
  </div>
 </div>