63714


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

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

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

[code]

    $(function() {
      $('.kanryo').click(function() {
        $('.modal').css("display", "flex")
      });
      $('.doui').click(function() {
        console.log();
        $('.modal').css("display", "none")
      })
    })
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2020-03-09T23:27:55.447
63710
2020-03-10T15:28:09.440
2020-03-09T23:33:45.350
37046
37046
question
javascript jquery css
position:fixedのモーダルウィンドウの上側が画面が狭いと見切れてスクロールもできない


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

> ### § 8.3. Cross-axis Alignment: the align-items and align-self
> properties[[1]](https://www.w3.org/TR/css-flexbox-1/#align-items-property)
>
>   * 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]](https://www.w3.org/TR/css-
overflow-3/#scrolling-direction)ため、スクロールがされず、 **オーバーフローしていないかのように振舞います**
。このため、上部方向へのオーバーフローに対してスクロールを行うことは出来ません。

> ### § 3.3. Scrolling Origin, Direction, and
> Restriction[[2]](https://www.w3.org/TR/css-overflow-3/#scrolling-direction)
>
> 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`
プロパティによって代替することで問題を解決することが出来ます。

[code]

    .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 を適用 */
    }
    
[/code]

[code]

    $(function() {
      $('.kanryo').click(function() {
        $('.modal').css("display", "flex")
      });
      $('.doui').click(function() {
        console.log();
        $('.modal').css("display", "none")
      })
    })
[/code]

[code]

    .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 を適用 */
    }
[/code]

[code]

    <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>
[/code]

もうひとつの解決策として、 `safe` キーワードを用いる方法があります。CSS Box Alignment Module Level 3 によれば、
`safe` キーワードは整列対象が整列コンテナよりも大きい場合に、整列対象がオーバーフローすることを避けるために **整列規則を`start`
に変更**します[[3]](https://www.w3.org/TR/css-align-3/#overflow-values)。

> ### § 4.4. Overflow Alignment: the safe and unsafe keywords and scroll
> safety limits[[3]](https://www.w3.org/TR/css-align-3/#overflow-values)
>
>   * 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.
>

[code]

    .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;
    }
    
[/code]

[code]

    $(function() {
      $('.kanryo').click(function() {
        $('.modal').css("display", "flex")
      });
      $('.doui').click(function() {
        console.log();
        $('.modal').css("display", "none")
      })
    })
[/code]

[code]

    .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;
    }
[/code]

[code]

    <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>
[/code]

  
ただし、Can I use によれば、 `safe` キーワードは 2020 年 3 月 10 日現在、 Firefox
以外に対応しているブラウザが存在しない点に注意する必要があります[[4]](https://caniuse.com/#feat=mdn-
css_properties_align-self_flex_context_safe_unsafe)。

[![ブラウザのsafeキーワードの対応状況の図があり、Firefoxのみがバージョン63以降で対応していることが示されている。](https://i.stack.imgur.com/tipyJ.png)](https://i.stack.imgur.com/tipyJ.png)


CC BY-SA 4.0
2020-03-10T01:55:26.497
63714
2020-03-10T15:28:09.440
2020-06-17T08:14:45.997
-1
32986
63710
answer