Question

我正在构建一个Web应用程序，该应用程序的所有选项都使用边栏菜单。每个页面的侧边栏都相等，但是根据所访问的页面，侧边栏包含不同的项目。

我们收到的反馈是，这些物品的大小（高度）在整个网站上都不相同。这是正确的，因为某些页面的菜单项包含两行甚至三行。尽管最常使用一行。

我的任务如下：

创建一个纯CSS解决方案，该解决方案需要一个组件（c-menu-item）的样式以及它的容器元素（b-sidebar）的样式，然后根据该样式自动调整所有菜单项的高度最大菜单项的大小。

Flexbox有一个简单的方法可以在水平方向上处理此问题，但是到目前为止，在垂直设置下进行任何重新创建操作的尝试都失败了。

强制性的最小用例：

.b-sidebar {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  background: #ff0;
  width: 200px;
  padding: 10px;
}

.c-menu-item {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  width: 100px;
  background: #0ff;
  margin: 5px;
}

<div class="b-sidebar">
  <div class="c-menu-item">Hello world!</div>
  <div class="c-menu-item">Hello world!</div>
  <div class="c-menu-item">Hello world!</div>
  <div class="c-menu-item">Hello world!</div>
  <div class="c-menu-item">Hello world! I have two lines</div>
</div>
<p>I would like for <b>all</b> menu items to take the height of the last element, in a responsive matter because the menu items en size differs per page of the web application</p>

（旁注：我知道我可以根据需要使用JavaScript解决此问题。我只是更喜欢干净的CSS解决方案，如果这不可能，那么对我也很好）。

如何在CSS的垂直列表项/列中实现响应高度？

0 个答案: