css - 需要用 `overflow:auto` 在 PARENT div 之外显示一个内部 DIV 吗？

Question

在此分享演示 UI。在此 UI 中，我想仅通过使用 CSS 在父窗口外显示 CALENDAR。日历也应该溢出提交/取消按钮 div 之外的部分 ] 1

代码片段:

在这里，类 date-picker-wrp 应该在完整的 MODAL 框之外。

.modalwindow {
    z-index: auto;
    position: fixed;
    box-shadow: 0 0 20px #333;
    background-color: #fff;
    border-radius: 0;
    overflow: inherit;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}

.zc-form > div {
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 550px;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
}
.zc-form-body {
    max-height: 500px;
    overflow: auto;
    padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input{
    border-radius: 4px;
    line-height: 33px;
    padding: 0 18px 0 15px;
    font-size: 14px;
    color: #2d3138;
    position: relative;
    height: 35px;
    border: solid 0.5px #dedede;
    background-color: #fff;
}

.date-picker-wrp{
    position: absolute;
    border-radius: 4px;
    overflow: hidden;
    background-color: #fff;
    z-index: 1000;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
    width: 100%;
    margin-top: 2px;
}

.datepicker{
    text-align: left;
    padding: 10px 7px;
}

.zc-form-footer{
    height: 85px;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 30px;
    justify-content: space-between;
    flex-shrink: 0;
    box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
    z-index: 1;
}

<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
<div>

<div id="winhead" class="mheader ">Create Modal</div>

<section class="zc-form-body">
<div inputs="">
  <div class="font14 mrgT20 posrel">
    <div class="zc-form-input-hdr">
      <span>date</span>
       <span class="clr9 zc-form-hint">Enter the due date</span>
    </div>
    <div class="posrel cur">
      <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
      <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="msi-calndr zcclr font15"></span>
        <span class="msi-close zcclr"></span>
      </span>
      <div class="date-picker-wrp" style="display: block;">
        <div element="calendar" class="date-picker">
          <div class="datepicker" style="display: block;">
            <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</section>
<footer class="zc-form-footer">
  <div class="w100 h100 dflx fjustifySB">
    <div class="flexC">
      <button class="buttn_pos">Add Task</button>
      <button class="buttn_neg btn evbtn mrgR20">Cancel</button>         </div>
  </div>
</footer>
</div>
</div>

预期结果:我希望日历 dom 看起来像下面快捷方式中的下拉列表，但只能使用纯 CSS(无 javascript 计算)

请引用这个 JS Fiddle 链接:https://jsfiddle.net/dilip96025/gzh26fej/28/在这里，国家/地区下拉列表应该出现在带有 con 类的框之外。

Answer 1

就我可以用您当前包含的代码重现您的问题而言，您需要从 .zc-form > div 中删除 overflow: hidden 并删除 溢出:来自 .zc-form-b​​ody 的自动。您的问题的原因是 overflow: hidden 确实隐藏了超出其自高度度和宽度的一切。

.modalwindow {
  z-index: auto;
  position: fixed;
  box-shadow: 0 0 20px #333;
  background-color: #fff;
  border-radius: 0;
  overflow: inherit;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.zc-form > div {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 550px;
  position: relative;
  border-radius: 5px;
}
.zc-form-body {
  max-height: 500px;
  padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input {
  border-radius: 4px;
  line-height: 33px;
  padding: 0 18px 0 15px;
  font-size: 14px;
  color: #2d3138;
  position: relative;
  height: 35px;
  border: solid 0.5px #dedede;
  background-color: #fff;
}

.date-picker-wrp {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
  width: 100%;
  margin-top: 2px;
}

.datepicker {
  text-align: left;
  padding: 10px 7px;
}

.zc-form-footer {
  height: 85px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
  z-index: 1;
}

<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
  <div>

    <div id="winhead" class="mheader ">Create Modal</div>

    <section class="zc-form-body">
      <div inputs="">
        <div class="font14 mrgT20 posrel">
          <div class="zc-form-input-hdr">
            <span>date</span>
            <span class="clr9 zc-form-hint">Enter the due date</span>
          </div>
          <div class="posrel cur">
            <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
            <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
          </div>
          <span class="msi-calndr zcclr font15"></span>
          <span class="msi-close zcclr"></span>
          </span>
          <div class="date-picker-wrp" style="display: block;">
            test1<br>
            test2<br>
            test3<br>
            test4<br>
            test5<br>
            test6<br>
            <div element="calendar" class="date-picker">
              <div class="datepicker" style="display: block;">
                <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  </section>
  <footer class="zc-form-footer">
    <div class="w100 h100 dflx fjustifySB">
      <div class="flexC">
        <button class="buttn_pos">Add Task</button>
        <button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
    </div>
  </footer>
</div>
</div>

编辑:回复评论的第二个代码片段。

.modalwindow {
  z-index: auto;
  position: fixed;
  box-shadow: 0 0 20px #333;
  background-color: #fff;
  border-radius: 0;
  overflow: inherit;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.zc-form > div {
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 550px;
  position: relative;
  border-radius: 5px;
}
.zc-form-body {
  max-height: 500px;
  overflow: auto;
  padding: 10px 30px 30px;
}
.posrel {
  position: relative;
}

.zc-form-input {
  border-radius: 4px;
  line-height: 33px;
  padding: 0 18px 0 15px;
  font-size: 14px;
  color: #2d3138;
  position: relative;
  height: 35px;
  border: solid 0.5px #dedede;
  background-color: #fff;
}

.date-picker-wrp {
  position: absolute;
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  z-index: 1000;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px 0px;
  width: 100%;
  margin-top: 2px;
}

.datepicker {
  text-align: left;
  padding: 10px 7px;
}

.zc-form-footer {
  height: 85px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
  flex-shrink: 0;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.21);
  z-index: 1;
}

<div id="form_dialog" type="popup" class="modalwindow zc-form zcalgncntr zcbg_mask">
  <div>

    <div id="winhead" class="mheader ">Create Modal</div>

    <section class="zc-form-body">
      <div inputs="">
        <div class="font14 mrgT20 posrel">
          <div class="zc-form-input-hdr">
            <span>date</span>
            <span class="clr9 zc-form-hint">Enter the due date</span>
          </div>
          <div class="posrel cur">
            <input placeholder="Ex : 2018/10/11" class="zc-form-input zc-form-date-prvw textL cur">
            <span class="zc-form-icons">
        <div loading="" class="form-input-loader dN">
          <span></span>
          <span></span>
          <span></span>
          </div>
          <span class="msi-calndr zcclr font15"></span>
          <span class="msi-close zcclr"></span>
          </span>
          <div class="date-picker-wrp" style="display: block;">
            test1<br>
            test2<br>
            test3<br>
            test4<br>
            test5<br>
            test6<br>
            <div element="calendar" class="date-picker">
              <div class="datepicker" style="display: block;">
                <div class="datepickerContainer" style="width: 0px; height: 0px;"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>
  </section>
  <footer class="zc-form-footer">
    <div class="w100 h100 dflx fjustifySB">
      <div class="flexC">
        <button class="buttn_pos">Add Task</button>
        <button class="buttn_neg btn evbtn mrgR20">Cancel</button> </div>
    </div>
  </footer>
</div>
</div>