html 为什么overflow：auto不能像预期的那样工作？

b4lqfgs4 于 12个月前发布在其他

关注(0)|答案(1)|浏览(91)

我有一个HTML，我不知道如何告诉.modal-message div不要超过它的父div .modal-container。父对象有一个动态的高度设置（80%），我必须以某种方式使它的子对象适应这个设置。我不想将overflow: auto添加到父对象，我只想让子对象可以滚动。

.content {
    width: 600px;
    margin: 0 auto;
    background: #ddd;
}

.wrapper {
    padding: 1rem;
    position: relative;
}

.modal {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
}

.modal-container {
    max-width: 80%;
    max-height: 80%;
    /* overflow: auto; */ /* this I don't want to do */
}

.modal-header {
    padding: .1rem 1rem;
    background: #ccc;
}

.modal-message {
    /* max-height: 150px; */ /* this I can't do */
    padding: 1rem;
    background: #f1f1f1;
    overflow: auto;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
  <div class="content">
    <div class="wrapper">

      <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
      </div>

      <div class="modal">
        <div class="modal-container">
          <div class="modal-header">
            <h4>Very important headline</h4>
          </div>
          <div class="modal-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>          
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>          
          </div>
        </div>
      </div>

    </div>
  </div>

</body>
</html>

有人知道如何实现这一点吗？

Html

来源：https://stackoverflow.com/questions/77251211/why-does-overflowauto-not-work-as-expected

1条答案

按热度按时间

u7up0aaq1#

使模态容器成为flexbox容器

.content {
  width: 600px;
  margin: 0 auto;
  background: #ddd;
}

.wrapper {
  padding: 1rem;
  position: relative;
}

.modal {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.modal-container {
  max-width: 80%;
  max-height: 80%;
  display: flex; /* added */
  flex-direction: column; /* added */
}

.modal-header {
  padding: .1rem 1rem;
  background: #ccc;
}

.modal-message {
  padding: 1rem;
  background: #f1f1f1;
  overflow: auto;
}

<div class="content">
    <div class="wrapper">

      <div class="section">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
      </div>

      <div class="modal">
        <div class="modal-container">
          <div class="modal-header">
            <h4>Very important headline</h4>
          </div>
          <div class="modal-message">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque perferendis aut dolores quia soluta sequi eos, ad reiciendis ex modi voluptate dolore officiis sint est laboriosam aperiam exercitationem ipsam consequuntur.</p>
          </div>
        </div>
      </div>

    </div>
  </div>

赞(0）回复(0）举报 12个月前

我来回答

html 为什么overflow：auto不能像预期的那样工作？

1条答案

相关问题

热门标签

最新问答