オーバーフロー

要素のオーバフローを簡単に管理します。

Overflow

4つのデフォルト値とクラスを使用して、 overflow 属性をその場で調整します。これらのクラスはデフォルトでは応答しません。

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using .overflow-hidden on an element with set width and height dimensions.
This is an example of using .overflow-visible on an element with set width and height dimensions.
This is an example of using .overflow-scroll on an element with set width and height dimensions.
vue
<template>
 <b-div display="md-flex">
  <b-div
   overflow="auto"
   padding="3"
   margin="b-3 b-md-0 e-md-3"
   background-color="light"
   style="max-width: 260px; max-height: 100px"
  >
   This is an example of using
   <code>.overflow-auto</code>
   on an element with set width and height dimensions. By design, this
   content will vertically scroll.
  </b-div>
  <b-div
   overflow="hidden"
   padding="3"
   margin="b-3 b-md-0 e-md-3"
   background-color="light"
   style="max-width: 260px; max-height: 100px"
  >
   This is an example of using
   <code>.overflow-hidden</code>
   on an element with set width and height dimensions.
  </b-div>
  <b-div
   overflow="visible"
   padding="3"
   margin="b-3 b-md-0 e-md-3"
   background-color="light"
   style="max-width: 260px; max-height: 100px"
  >
   This is an example of using
   <code>.overflow-visible</code>
   on an element with set width and height dimensions.
  </b-div>
  <b-div
   overflow="scroll"
   padding="3"
   margin="b-3 b-md-0 e-md-3"
   background-color="light"
   style="max-width: 260px; max-height: 100px"
  >
   This is an example of using
   <code>.overflow-scroll</code>
   on an element with set width and height dimensions.
  </b-div>
 </b-div>
</template>

overflow-x

overflow-xプロパティを調整して、コンテンツの水平方向のオーバーフローに影響を与えます。

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using .overflow-hidden on an element with set width and height dimensions.
This is an example of using .overflow-visible on an element with set width and height dimensions.
This is an example of using .overflow-scroll on an element with set width and height dimensions.
vue
<template>
 <b-div class="overflow-x-auto">
  ...
 </b-div>
 <b-div class="overflow-x-hidden">
  ...
 </b-div>
 <b-div class="overflow-x-visible">
  ...
 </b-div>
 <b-div class="overflow-x-scroll">
  ...
 </b-div>
</template>

overflow-y

overflow-yプロパティを調整し、コンテンツの垂直方向のオーバーフローに影響を与える。

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using .overflow-hidden on an element with set width and height dimensions.
This is an example of using .overflow-visible on an element with set width and height dimensions.
This is an example of using .overflow-scroll on an element with set width and height dimensions.
vue
<template>
 <b-div class="overflow-y-auto">
  ...
 </b-div>
 <b-div class="overflow-y-hidden">
  ...
 </b-div>
 <b-div class="overflow-y-visible">
  ...
 </b-div>
 <b-div class="overflow-y-scroll">
  ...
 </b-div>
</template>