html - 根据较高的 sibling 扩展 child 高度( parent 高度设置为自动)

Question

简单问题(下面的片段):

• <ul>与 display: flex
• 每个<li>应该具有相同的大小并且一起必须占据 <ul> 的整个宽度
• 每个<li>有一个 <a>内容可能有 1 或 2 行文本。
• 每个<li>已将高度设置为自动以适应<a>内容

我的问题:

我需要“单行”链接自动扩展到“双行”链接的高度。设置height: 100%不工作，因为他们的 parent height它被特意设置为自动以适应内容。

但在某些情况下，我会得到两行链接，而在某些情况下，所有链接都是一行。所以我需要单行链接在发生这种情况时自动展开。

这怎么可能？

#root {
  width: 140px;
  box-sizing: border-box;
}

ul {
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding: 0;
}

li {
  flex-grow: 1;
  flex-basis: 30px;
  list-style-type: none;
  display: inline-block;
  border: 1px dotted blue;
  height: auto;
}

a {
  cursor: pointer;
  border: 1px dotted green;
  display: inline-block;
  background-color: lightblue;
  padding: 8px 0px;
}

<div id="root">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Long Link 2</a></li>
  </ul>
</div>

Answer 1

你不需要在 flex 中使用 inline-block。只需为 li 使用 display: flex，为 a 使用 display: block。最后，为 a 添加 width: 100%。它似乎符合您的要求。

#root {
  width: 140px;
  box-sizing: border-box;
}

ul {
  display: flex;
  justify-content: space-between;
  margin: auto;
  padding: 0;
}

li {
  flex-grow: 1;
  flex-basis: 30px;
  list-style-type: none;
  display: flex;
  border: 1px dotted blue;
  height: auto;
}

a {
  cursor: pointer;
  border: 1px dotted green;
  display: block;
  background-color: lightblue;
  padding: 8px 0px;
  width: 100%;
}

<div id="root">
  <ul>
    <li><a>Link 1</a></li>
    <li><a>Long Link 2</a></li>
  </ul>
</div>