【解決方法】2 つのアンカーが div の 100% を占めるようにします

「ホーム」タブと「履歴」タブが親 div の 100% を占めるようにしたいのですが、CSS に 100% と入力すると切り取られてしまいます。また、オーバーフローを非表示にしたいので、表示することは解決策ではありません。

HTML:

.bottom {
        background-color: red;
        width: 100%;
        max-width: 3000px;
        max-height: 200px;
        margin: auto;
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        border-style: solid;
    }
    .navBottom{
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;

    }   
    .navBottom a {
      color: white;
      text-align: center;
      padding: 1vh 50px;
      max-height: 200px;
      text-decoration: none;
      font-size: 1.8vh;
      border-right: 2px solid black;
      text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
    }

CSS:

<pre><div class="bottom">
            <div class="navBottom">
            <a href="../index.html">Home</a>
            <a href="history.html">History</a>
          </div>
            </div>

完全なコード: https://codepen.io/Marshjek/pen/KQZVBQ

私が試したこと：

パディングを100%にし、幅を100%にし、em、rem、vw、vwを試しました

解決策 1

追加が足りないと思います display:block;width:100%;flex: 0 0 100%; リンクへ。これにより、リンクがブロックのように動作し、フレックスを追加すると 100% 表示されます。

また、追加する必要があります flex-wrap: wrap; 親に。

ここにありますコードペン。

以前にも同じ問題がありました Webアプリケーション開発ページ。