Horizontal scroll exceed parent width

Question

I have problem with horizontal scrolling, when slide-wrap width is smaller than parent width, then is inside q-page, but when I set width i.e. to 100% it is wider than parent. How to adjust width of menu to have horizontal scroll inside parent width to not set hardcoded widt value?

<template>
  <q-layout>
    <q-page-container class="column col row" style="background-color: rgb(217,225,238);">
      <q-page>
        <div class="col row column">
          <div class="slide">
            <menu-bar class=""></menu-bar>
          </div>
        </div>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

<style lang="scss" scoped>
.slide-wrap {
  width: 350px;
  overflow-x: scroll;
}

.slide {
  width: 900px;
}

</style>

MSZMC · Accepted Answer · 2024-07-26 17:56:07Z

0

width: 100vw solves problem, with this value matches parent width

answered Jul 26, 2024 at 17:56

MSZMC

1541 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Horizontal scroll exceed parent width

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related