Как исправить кнопки над нижним колонтитулом, используя flex

Question

Я использую Materializecss для создания приложения React. Я уже применил flex в своем классе приложения. А теперь я хочу применить flex внутри основного тега, где кнопки фиксируются внизу основного тега и над нижним колонтитулом.

Я пробовал {margin-top: auto;}, justify-content: flex-end, который не помог. Кнопки всегда печатаются после класса контента. Я могу установить высоту класса контента, но небольшие устройства плохо отображают изображение, и это не решает мою проблему.

JSX код:

<div className="app">
 <header> <header>
 <main>
   <div className="box">
   <div className="content"> Long text less than 100 words <div>
   <div className="buttons"> <button> Button-1 </button> <button> Button-2 </button> 
   <div>
 <main>
 <footer><footer>
<div>

My css
app {
 display: flex;
 min-height: 100vh;
 flex-direction: column;
}

main {
 flex: 1 0 auto;
}

Я хочу прикрепить свою кнопку над нижним колонтитулом. В моем классе контента 100 слов, после чего кнопка должна стоять над нижним колонтитулом, который не отображается после класса контента.

Буду признателен за помощь.

Answer 1

Вы не применили display:flex и т. Д. К основному элементу. Если вы сделаете это, margin-top:auto будет работать.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

.app {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background: ;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.buttons {
  margin-top: auto;
}

<div class="app">
  <header>header </header>
  <main>
    <div class="box">box</div>
    <div class="content"> Long text less than 100 words </div>
    <div class="buttons">
      <button> Button-1 </button>
      <button> Button-2 </button>
    </div>

  </main>
  <footer>footer</footer>
</div>