如何根据父级高度/宽度变化调整内部元素？

Question

我在水平对齐的div 中有ul、li。我使用了flex 显示。这里 div 是父容器，所有样式，如背景、高度、宽度都将在这里应用。 li 元素有一些内部内容，如 div、span 可能有文本/图标。 每当我调整父 div 的宽度/高度时，都应该调整内部内容。图标/文本（li 的子跨度）需要居中。填充将需要调整。我在下面的 plunker 中编辑了我的需求

plunker link

您能否检查一下并让我知道任何选项。感谢您的任何建议。

这是我的css代码

 .table_ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height:100%;
  flex-wrap: wrap;
  list-style: none;
  padding:0px;
}
.cells_li {
  flex: 1 1 auto;
  border: 1px solid red;
  border-right:none;
  padding: .5em;
  text-align: center;
}

.cells_li:last-child {
  border-right: 1px solid red;
}
.main_div {
  background:gray;
  width:400px;
  height:20px;
}

下面是我的html页面

<div id="group" class="main_div">
        <ul class="table_ul">
            <li class="cells_li"><div><span>desktop</span></div></li>
            <li class="cells_li"><div><span>laptop</span></div></li>
            <li class="cells_li"><div><span>work</span></div></li>
        </ul>
    </div>

Answer 1

您可以将float:left 分配给LI 和height:100% 以使它们获得父高度。

/* Styles go here */
.table_ul {
  width: 100%;
  height:100%;
  list-style: none;
  padding:0px;

}
.cells_li {
  border: 1px solid red;
  border-right:none;
  padding: 0.5em;
  text-align: center;
  width:calc(33% - 1em);
  float:left;display: inline;
  height:calc(100% - 1em);
}

.cells_li:last-child {
  border-right: 1px solid red;
}
.main_div {
  background:gray;
  width:400px;
  height:150px;
}