如何在不对值进行硬编码的情况下将导航高度<div>设置为与圆<div>的高度相同

Question

我有个小提琴，

https://jsfiddle.net/thakv1/9zf1tm7q/2/

HTML：-

<div class = "single-page">
  <div class="navigation">
    <div class ="circle">
      1
    </div>
  </div>
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

CSS：-

.single-page{
  display: flex;
  flex-flow: row nowrap;
}
.content{
  height: 400px;
  flex:1;
  background-color:white;
}
.navigation{
  width : 52px;
}
.circle{
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    background-color: #295ED9;
    color: white;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    margin: 20px 10px;
}

在这个小提琴中，导航的高度为400像素，我希望导航的高度等于圆div的高度（大约30像素左右）而不是内容div的高度。

Answer 1

您应将align-self:flex-start添加到.navigation

.single-page{
  display: flex;
  flex-flow: row nowrap;
}
.content{
  height: 400px;
  flex:1;
  background-color:red;
}
.navigation{
  width : 52px;
  background: red;
  align-self:flex-start;
}
.circle{
    width: 30px;
    line-height: 30px;
    border-radius: 50%;
    text-align: center;
    background-color: #295ED9;
    color: white;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    margin: 20px 10px;
}

<div class = "single-page">
  <div class="navigation">
    <div class ="circle">
      1
    </div>
  </div>
  <div class="content">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>