css parent 位置随 child 高度变化而变化

Question

我不明白为什么改变 svg 的高度会偏移 parent div 的位置。请参阅此视频示例：

bottom div 保持不变。当我将 .transport .menu-btn .icon 的高度更改为 height: 1rem;

时，transport div 会从顶部偏移

#bottom {
  position: fixed;
  bottom: 0;
  height: 15%;
  width: 100%;
  border-top: 1px solid var(--purple-half);
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  white-space: nowrap;
  overflow-y: hidden;
}

.menu-items {
  scroll-snap-align: start;
  width: 100%;
  height: 100%;
  display: inline-flex;
  justify-content: space-evenly;
  align-items: center;
  border: 1px solid red;
}

.menu-btn {
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 0.3rem;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.menu-label {
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  font-style: italic;
}

.menu-items .icon {
  height: 2rem;
  fill: var(--white);
}

.transport {
  justify-content: center;
}

.transport .menu-btn {
  width: 4rem;
  height: 2rem;
  margin-right: 0.5rem;
}

.transport .menu-btn .icon {
  height: 1rem;
}

#stop {
  background: var(--magenta-3q);
}

#start {
  background: var(--lime-3q);
}

.transport .input {
  margin: 0 0.5rem;
  user-select: initial;
}

.transport input {
  max-width: 5rem;
  height: 100%;
  padding: 0.25rem;
  border: none;
  outline: none;
  border: 1px solid var(--white);
  border-radius: 0.3rem;
  background: var(--black);
  color: var(--white);
  overflow: hidden;
  text-align: center;
  font-size: 1.25rem;
}

#bpm-label {
  font-style: normal;
  height: 2rem;
  width: 4rem;
  padding: 0.5rem;
}

<div id='bottom'>

  <div class="menu-items transport">
    <button id="stop" class="menu-btn">
      <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class=" icon">
        <path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48z"></path>
      </svg>
    </button>
    <button id="start" class="menu-btn">
      <svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class=" icon">
        <path fill="currentColor" d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z"></path>
      </svg>
    </button>
    <div class="input">
      <input id="bpm" type="number" value="100">
      <label for="bpm" id="bpm-label">bpm</label>
    </div>
  </div>

  <div class="menu-items">
    <button id="undo" class="menu-btn" disabled="">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class=" icon">
        <path d="M0 0h24v24H0z" fill="none"></path><path d="M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z"></path>
      </svg>
      <label for="undo" class="menu-label">undo</label>
    </button>
    <button id="redo" class="menu-btn" disabled="">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class=" icon">
        <path d="M0 0h24v24H0z" fill="none"></path>
        <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"></path>
      </svg>
      <label for="redo" class="menu-label">redo</label>
    </button>
  </div>

</div>

Answer 1

设置内联弹性项目的垂直对齐方式。

.menu-items {
    ...
    vertical-align: bottom; /* or top */
}

css parent 位置随 child 高度变化而变化

css parent position changing with child height change

html

css

height

layout