1

完了ボタンを押すと同意するかしないかの
モーダルウィンドウがでるボタンを作っています

うまくできたと思ったのですがレスポンスブルにしたいので
画面を狭めてテストするとモーダルウィンドウの上の方が見切れました

これはposition:fixedのせいだと疑っていますが性質上これは外せません
どうすればこれを解決できるでしょうか?

$(function() {
  $('.kanryo').click(function() {
    $('.modal').css("display", "flex")
  });
  $('.doui').click(function() {
    console.log();
    $('.modal').css("display", "none")
  })
})
.modal {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: black;
  position: fixed;
  top: 0;    left: 0;
}

.modal-container {
  display: flex;
  justify-content: center;
  width: 40%;
  border-top: 10px solid red;
  border-bottom: 10px solid red;
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="kanryo">完了</button>

<div class="modal" style="display:none;">
  <div class="modal-container">
    <div class="modal-content">
      <h1>確認</h1>
      <ul>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
      </ul>
      <p>よろしいですか?</p>
      <button class="doui">
      同意する
      </button>
    </div>
  </div>
</div>

1
  • 縦横最小でどのくらいのサイズを想定していますか?というのもposition:fixでalign-items: center;とheight: 100vh; をしている以上、中身のコンテンツが想定している最小幅高さを超える場合はどうしても切れることになります。最小幅高さを超えたら別の表示にするか、もしくは中身のコンテンツ量を減らさないといけません。
    – keitaro_so
    Commented 2020年3月10日 1:04

1 件の回答 1

1

今回の問題の原因は align-items プロパティによる整列を行っている点です。CSS Flexible Box Layout Module Level 1 によれば、 align-items プロパティの値が center に設定されているとき、flex コンテナよりも flex アイテムのサイズが大きければ、 flex コンテナの両端が均等なサイズだけオーバーフローします[1]

§ 8.3. Cross-axis Alignment: the align-items and align-self properties[1]

  • center
    The flex item’s margin box is centered in the cross axis within the line. (If the cross size of the flex line is less than that of the flex item, it will overflow equally in both directions.)

また、通常オーバーフローしただけであれば、スクロールバーによるスクロールが可能です。しかし、今回の場合は互換性のために上部へのオーバーフローが切り取られる[2]ため、スクロールがされず、オーバーフローしていないかのように振舞います。このため、上部方向へのオーバーフローに対してスクロールを行うことは出来ません。

§ 3.3. Scrolling Origin, Direction, and Restriction[2]

The initial scroll position, that is, the initial position of the box’s scrollable overflow region with respect to its border box, prior to any user or programmatic scrolling that changes it, is dependent on the box’s writing mode, and is by default the block-start/inline-start edge of the box’s padding edge. However, the align-content and justify-content properties [CSS-ALIGN-3] can be used to change this, see CSS Box Alignment 3 §5.3 Overflow and Scroll Positions.

Due to Web-compatibility constraints (caused by authors exploiting legacy bugs to surreptitiously hide content from visual readers but not search engines and/or speech output), UAs must clip the scrollable overflow region of scroll containers on the block-start and inline-start sides of the box (thereby behaving as if they had no scrollable overflow on that side).

The viewport uses the principal writing mode for these calculations.

ここで解決する必要がある問題は、 align-items プロパティによって両端が均等なサイズだけオーバーフローすることが根本的な原因であるため、交差軸における中央配置を align-items プロパティによって代替することで問題を解決することが出来ます。

.modal-container {
  display: flex;
  justify-content: center;
  width: 40%;
  border-top: 10px solid red;
  border-bottom: 10px solid red;
  background-color: white;
  margin: auto; /* .modal クラスでの justify-content, align-items プロパティを削除したうえで auto margin を適用 */
}

$(function() {
  $('.kanryo').click(function() {
    $('.modal').css("display", "flex")
  });
  $('.doui').click(function() {
    console.log();
    $('.modal').css("display", "none")
  })
})
.modal {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
}

.modal-container {
  display: flex;
  justify-content: center;
  width: 40%;
  border-top: 10px solid red;
  border-bottom: 10px solid red;
  background-color: white;
  margin: auto;
  /* .modal クラスでの justify-content, align-items プロパティを削除したうえで auto margin を適用 */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="kanryo">完了</button>

<div class="modal" style="display:none;">
  <div class="modal-container">
    <div class="modal-content">
      <h1>確認</h1>
      <ul>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
      </ul>
      <p>よろしいですか?</p>
      <button class="doui">
      同意する
      </button>
    </div>
  </div>
</div>

もうひとつの解決策として、 safe キーワードを用いる方法があります。CSS Box Alignment Module Level 3 によれば、 safe キーワードは整列対象が整列コンテナよりも大きい場合に、整列対象がオーバーフローすることを避けるために整列規則を start に変更します[3]

§ 4.4. Overflow Alignment: the safe and unsafe keywords and scroll safety limits[3]

  • safe
    If the size of the alignment subject overflows the alignment container, the alignment subject is instead aligned as if the alignment mode were start.
.modal {
  display: flex;
  justify-content: center;
  align-items: safe center; /* safe キーワードを使用 */
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
}

$(function() {
  $('.kanryo').click(function() {
    $('.modal').css("display", "flex")
  });
  $('.doui').click(function() {
    console.log();
    $('.modal').css("display", "none")
  })
})
.modal {
  display: flex;
  justify-content: center;
  align-items: safe center; /* safe キーワードを使用 */
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
}

.modal-container {
  display: flex;
  justify-content: center;
  width: 40%;
  border-top: 10px solid red;
  border-bottom: 10px solid red;
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="kanryo">完了</button>

<div class="modal" style="display:none;">
  <div class="modal-container">
    <div class="modal-content">
      <h1>確認</h1>
      <ul>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
        <li>事項</li>
      </ul>
      <p>よろしいですか?</p>
      <button class="doui">
      同意する
      </button>
    </div>
  </div>
</div>

ただし、Can I use によれば、 safe キーワードは 2020 年 3 月 10 日現在、 Firefox 以外に対応しているブラウザが存在しない点に注意する必要があります[4]

ブラウザのsafeキーワードの対応状況の図があり、Firefoxのみがバージョン63以降で対応していることが示されている。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。