x溢出时子div的背景不会水平填充父div

Question

所以我有一个主要的div在y方向上溢出。它是一个控制台，可在div中以彩色编码的背景显示每个传入的答复。问题是在较小的设备上x溢出，并且这些div的背景未在x溢出中显示。如何在整个X轴上显示背景？

<div class="console">
   <div v-for="(line, index) in console" :key="index" 
      :style="{ backgroundColor: line.backgroundColor, borderTop: `1px solid ${line.borderColor}`, borderBottom: `1px solid ${line.borderColor}` }" class="p-2">
      <i :class="line.icon" :style="{ color: line.iconColor }" class="mt-1"/>
      <span style="white-space: pre;">{{ line.message }}</span>
    </div>
</div>

.console {
  border: 2px solid #e8e8e8;
  border-radius: 0.25rem;
  margin: 8px 0px;
  overflow-y: scroll;
  height: 150px;
}