JSFiddle - React, Tailwind, and code Playground

HTML

<div class="everything">
  <div class="section">
  Section A
  </div>
  
  <div class="section">
  Section B
  <div class="toolbar">
   <div class="button">Button1</div>
   <div class="button">Button2</div>
   <div class="button">Button3</div>
   <div class="button">Button4</div>
   <div class="button">Button5</div>
   <div class="button">Button6</div>
   <div class="button">Button7</div>
   <div class="button">Button8</div>
   <div class="button">Button9</div>
   <div class="button">Button10</div>
   <div class="button">Button11</div>
   <div class="button">Button12</div>
   <div class="button">Button13</div>
   <div class="button">Button14</div>
  </div>
  </div>
</div>

CSS

.everything {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 100%;
}

.section {
  border: 1px solid black;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.toolbar {
  display: flex;
  background-color: lightblue;
  flex-direction: row;
  overflow: scroll;
  margin-top: auto;
  
  /* Broken */
  width: 100%;
  
  /* Works but requires fixed size */   
  /* width: 200px; */
  
  /* Oddly enough, also broken */
  /* width: 50%; */
}

.toolbar .button {
  padding: 5px;
  cursor: pointer;
}

.toolbar .button:hover {
  background-color: lightgreen;
}