diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less index 3a776e4f7..d8b9fe81f 100644 --- a/src/action-sheet/index.less +++ b/src/action-sheet/index.less @@ -2,7 +2,10 @@ @import '../style/mixins/hairline'; .van-action-sheet { + display: flex; + flex-direction: column; max-height: @action-sheet-max-height; + overflow: hidden; color: @action-sheet-item-text-color; &__item, @@ -42,6 +45,8 @@ } &__cancel { + flex-shrink: 0; + box-sizing: border-box; color: @action-sheet-cancel-text-color; } @@ -59,6 +64,7 @@ } &__header { + flex-shrink: 0; font-weight: @font-weight-bold; font-size: @action-sheet-header-font-size; line-height: @action-sheet-header-height; @@ -67,6 +73,7 @@ &__description { position: relative; + flex-shrink: 0; padding: 20px @padding-md; color: @action-sheet-description-color; font-size: @action-sheet-description-font-size; @@ -96,4 +103,16 @@ color: @action-sheet-close-icon-active-color; } } + + &__inner { + display: flex; + flex: 1; + flex-direction: column; + overflow: hidden; + } + + &__main { + flex: 1; + overflow-y: scroll; + } } diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx index bf91976a4..94f77860d 100644 --- a/src/action-sheet/index.tsx +++ b/src/action-sheet/index.tsx @@ -159,11 +159,15 @@ function ActionSheet( safeAreaInsetBottom={props.safeAreaInsetBottom} {...inherit(ctx, true)} > - {Header()} - {Description()} - {props.actions && props.actions.map(Option)} - {Content()} - {CancelText()} +