如何用CSS Flexbox将日期选择器Footer置于Body下方及样式修复

针对你遇到的三个问题：Footer跑侧边、日历padding不生效、日历容器宽度和输入框不一致，直接修改SCSS代码即可，关键修改点已标注：

修改后的完整SCSS代码 #

.App{
  width: 350px; 
  height: 500px;
}
.custom-datepicker {
  .ant-picker-active-bar {
    display: none;
  }
}

.custom-datepicker-dropdown {
  /* 让下拉容器宽度和输入框匹配 */
  width: 100%;
  max-width: 350px;

  .ant-picker-panel-container {
    flex: 1;
    display: flex;
    /* 垂直排列面板和Footer，解决Footer跑侧边问题 */
    flex-direction: column;
    width: 100%;

    .ant-picker-panels {
      flex: 1;
      display: flex;
      .ant-picker-panel:not(:first-child) {
        display: none;
      }
      :first-child {
        button.ant-picker-header-next-btn {
          visibility: visible !important;
        }
      }
    }
    .ant-picker-panel {
      flex: 1;
      display: flex;
      /* 垂直排列日历内部的头部、主体，避免内部布局混乱 */
      flex-direction: column;
      border: none;
      width: 100%;

      .ant-picker-date-panel {
        width: 100%;
        .ant-picker-header{
          border-bottom: none;
        }
        .ant-picker-body {
          /* 移除flex布局，解决padding不生效问题 */
          /* display: flex; */
          /* place-content: center; */
          padding: 10px 10px;

          .ant-picker-content {
            width: 100%;
            tr td:nth-child(7) {
              background-color: grey;
            }
            .ant-picker-cell {
              &.ant-picker-cell-in-view {
                &.ant-picker-cell-today {
                  .ant-picker-cell-inner {
                    &::before {
                      border: green;
                      border-radius: 50%;
                    }
                  }
                }
                &.ant-picker-cell-range-start {
                  .ant-picker-cell-inner {
                    border-top-left-radius: 32px;
                    border-bottom-left-radius: 32px;
                    background-color: green;
                  }
                  &:not(.ant-picker-cell-range-start-single) {
                    &::before {
                      background-color: green;
                    }
                  }
                }
                &.ant-picker-cell-range-end {
                  .ant-picker-cell-inner {
                    border-top-right-radius: 32px;
                    border-bottom-right-radius: 32px;
                    background-color: green;
                  }
                  &:not(.ant-picker-cell-range-end-single) {
                    &::before {
                      background-color: green;
                    }
                  }
                }
                &.ant-picker-cell-in-range {
                  &::before {
                    background-color: lightblue;
                  }
                  .ant-picker-cell-inner {
                    color: blue;
                  }
                }
                &.ant-picker-cell-selected {
                  .ant-picker-cell-inner {
                       background-color: green;
                 }                
                }
              }
            }
          }
        }
      }
    }
    .ant-picker-footer {
      border-top: none;
      /* 移除flex:1，避免Footer被过度拉伸 */
      /* flex: 1; */
      display: flex;
      width: 100%;

      .ant-picker-footer-extra {
        width: 100%;
        .custom-dropdown-container {
          width: 100%;
          .custom-from-to-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 16px;
            width: 100%;
            border-bottom: 1px solid #f0f0f0;   
            padding-bottom: 12px;         
            .custom-from-to-input-holder {
              display: flex;
              flex-direction: column;
              margin-bottom: 8px;
              .custom-range-text {
                margin-bottom: 8px;
                font-size: 11px;
                font-weight: 400;
                font-stretch: normal;
                font-style: normal;
                line-height: 16px;
                letter-spacing: 0.5px;
              }
              .custom-range-input {
                height: 30px;
                width: 90px;
                display: flex;
                align-items: center;
              }
            }
          }
          .custom-from-to-divider {
            width: 100%;
            height: 1px;
            margin: 0 16px;
            position: relative;
            top: 8px;
            background-color: black;
          }
          .custom-actions-holder {
            padding-top: 10px;
            width: 100%;
            .left-section {
               float: left;
            }
            .right-section {
              float: right;
              .today-button{
                margin-left:10px
              }
              .apply-button{
                margin-left:10px
              }
            }
          }
        }
      }
    }
  }
}

关键修改说明 #

• Footer跑侧边问题：给.ant-picker-panel-container添加flex-direction: column，让日历面板和Footer垂直排列；同时给.ant-picker-panel设置flex-direction: column，保证日历内部的头部、主体垂直布局。
• 日历padding不生效：移除.ant-picker-body的display: flex和place-content: center，默认布局下padding即可正常显示；给.ant-picker-content设置width:100%，确保日历内容撑满面板。
• 日历容器宽度和输入框一致：给.custom-datepicker-dropdown设置width:100%和max-width:350px（和App容器宽度匹配），同时让.ant-picker-panel-container及内部元素都设置width:100%，确保整体宽度和输入框对齐。

内容的提问来源于stack exchange，提问作者user16860065