Html 自动调整多个<；李>；按父级大小

你好，我想做一些类似于我所做的事情。更确切地说，我有一个div和一个无序列表。我正在寻找一种方法，如果有3个或3个以上的盒子具有相同的调光（响应）。如果你在3岁以下，我只想有相同的调光，但如果不适合也可以

 ----------------------------
  parent
    | |-----------||------|
    | |           ||  li  |
    | |           ||      |
    | |           ||------|
    | |           ||------|
    | |           ||  li  |
    | |    div    ||      |
    | |           ||------|
    | |           ||------|
    | |           ||  li  |
    | |           ||      |
    | |           ||------|
    | |------------
    ---------------------------



 ----------------------------
  parent
    | |-----------||------|
    | |           ||  li  |
    | |           ||      |
    | |           ||------|
    | |           ||------|
    | |           ||  li  |
    | |    div    ||      |
    | |           ||------|
    | |           |
    | |           |
    | |           |
    | |           |
    | |------------
    ---------------------------

试试这个：

<div class="parent">
    <div class="content">
    </div>
    <div class="boxes-list">
        <span class="box"></span>
        <span class="box"></span>
        <span class="box"></span>

    </div>
</div>

<style>
    .parent {
        width: 70vw;
        height:80vh;
        background: red;
        display: flex;
        border: 5px solid black;
    }

    .content {
        flex: 7;
        border: 5px solid yellow;
    }

    .boxes-list {
        flex: 3;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;
    }

    .box {
        width: 100%;
        height: 100%;
        background: black;
        margin: 1px;
        max-height: 245px;
    }
</style>

.家长{
宽度：70vw；
高度：80vh；
背景：红色；
显示器：flex；
边框：5px纯黑；
}
.内容{
弹性：7；
边框：5px纯黄色；
}
.盒子清单{
弹性：3；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.盒子{
宽度：100%；
身高：100%；
背景：黑色；
保证金：1px；
最大高度：245px；
}

您可以添加或删除复选框。

---

要控制内容的宽度，请更改“content”类的flex属性值

，您可以为此使用flexbox

.parent{
显示器：flex；
弯曲方向：行；
宽度：50%；
高度：500px；
背景色：#ccc；
填充：10px；
}
.盒子{
柔性生长：1；
身高：100%；
背景色：红色；
}
.导航{
显示器：flex；
弯曲方向：立柱；
柔性生长：1；
身高：100%；
列表样式类型：无；
背景颜色：绿色；
保证金：0；
填充：0；
}
李国荣先生{
柔性生长：1；
对齐项目：拉伸；
背景颜色：粉红色；
利润率：10px；
}

发布您试图解决此问题的代码。为父div指定宽度和高度，然后将其添加到同一类的div中

div

和

li

，将这两个div向左浮动。在

li

中添加另一个div类，然后为其指定宽度，使其垂直对齐。还可以在

div

中添加一个新的div类，并为其指定宽度和高度。你会得到你想要的