Html 元素拒绝调整大小？

查找继承人权限，查看没有定义初始元素是否有问题，因为我主要使用百分比，但事实并非如此。我甚至将容器div的最大高度设置为5px，以确定这是否是问题所在，但没有任何反应。我一直在为这件事发愁。我正在尝试将UL高度与视频高度完全对齐，并使用溢出滚动条来包含其余选项卡

HTML:

---

如果使用flexbox不是一个选项，那么表可能是一个选项

请看这里：

我只将.tabcontent包装在.tabcontent包装中，并将

display:table cell

应用于此和.video nav contain

然后，我添加了以下CSSUndereath yours（以便您可以看到，我实际添加或删除的内容更容易）：

---

具有默认边距。添加

.video-nav{margin:0}

。这将它清理了一点，但对我当前的任务没有任何帮助，对不起。哦，我明白了，对不起。所以您试图使导航（其最大高度设置为

10%

）与视频的高度相同？将最大高度：10%扔到那里，看我是否可以调整大小。这不起作用，视频组合包含的高度：500px不起作用。我现在简直目瞪口呆。

<div class="video-portfolio">
        <div class="video-nav-contain">
            <ul class="video-nav">
                <li id="hide1">
                    <a class="tablinks" onclick="openVideo(event, 'garageBar')">
                        <img class="tab-icon" src="images/garage-bar-tab.png" onClick="videoDisplay1">
                    </a>
                </li>
                <li id="hide2">
                    <a class="tablinks" onclick="openVideo(event, 'murryLake')">
                        <img class="tab-icon" src="images/murry-lake-tab.png">
                    </a>
                </li>
                <li id="hide3">
                    <a class="tablinks" onclick="openVideo(event, 'roofFun')">
                        <img class="tab-icon" src="images/roof-fun-tab.png">
                    </a>
                </li>
                <li id="hide4">
                    <a class="tablinks" onclick="openVideo(event, 'westsideClean')">
                        <img class="tab-icon" src="images/westsideClean-tab.png">
                    </a>
                </li>
            </ul>
        </div>
        <div id="garageBar" class="tabcontent" id="videoName">
            <video class="vid-tabs" controls>
                <source src="images/garage%20bar.mp4" type="video/mp4">
            </video>
        </div>
        <div id="murryLake" class="tabcontent" style=" display: none;">
            <video class="vid-tabs" controls>
                <source src="images/murry%20lake2.mp4" type="video/mp4">
            </video>
        </div>
        <div id="roofFun" class="tabcontent" style="display: none;">
            <video class="vid-tabs" controls>
                <source src="images/rooftop%20fun.mp4" type="video/mp4">
            </video>
        </div>
        <div id="westsideClean" class="tabcontent" style="display: none;">
            <video class="vid-tabs" controls>
                <source src="images/westside%20cleanup.mp4" type="video/mp4">
            </video>
        </div>
    </div>

.video-portfolio {
text-align: center;
width: 100%;
background-color: white;
max-height: 500px;
}

.vid-tabs {
width:80%;
}

.video-nav {
overflow: hidden;
height: 100%;
width: 100%;
list-style: none;
display: inline-block;
width: auto;
padding: 0;

}

.video-nav-contain {
width: 20%;
overflow: scroll;
display: inline-block;
float: right;
max-height: 10%;
}

.tab-icon {
padding-bottom: 5%;
}

video-portfolio {
  display: table;
}
.tacontent-wrapper, .video-nav-contain {
  display: table-cell;
  float: none; /* no float needed */
}
.video-nav-contain {
  overflow: hidden; /* move overflow from here to ul */
}
.video-nav-contain > ul.video-nav {
  padding: 0; margin: 0;
  overflow: scroll; /* the overflow from above */
  width: 100%; height: 100%;
}