如何让前置标签的宽度减小？

Question

如何让前置标签的宽度减小？当浏览器窗口缩小时，pre 标记可防止 q-card 减小。我想要一张 q 卡，其中包含与 ChatGPT 中的代码类似的代码。然而，q-card 并不会随着 pre 和 code 标签而减少

转载网址

https://codepen.io/timamus/pen/eYaNPQz

代码

<div id="q-app">
  <div class="q-ma-md">
    <q-layout view="lHh Lpr lFf">
      <q-page-container>
        <q-page class="flex flex-center">
          <q-list>
            <q-item class="justify-center">
              <q-item-section class="left-sec">
              </q-item-section>
              <q-item-section class="custom-message">
                <q-card flat bordered class="card-code">
                  <q-card-section style="height: 100%; width: 100%">
                    <pre>
                    <code>
                    {{ newMessage }}
                    </code>
                    </pre> 
                   <!-- <q-item-label> {{ newMessage }} <q-item-label> -->
                  </q-card-section>
                </q-card>
              </q-item-section>
              <q-item-section class="right-sec">
              </q-item-section>
            <q-item>
          </q-list>
        </q-page>
        <q-page-container>
    </q-layout>
  </div>

  <div class="q-ma-md">
    Running Quasar v{{ $q.version }}
  </div>
</div>

Answer 1

您可以通过添加

.q-list

来设计您的

width: -webkit-fill-available;

类以实现结果。