Question

你好，我两天内掉了一半的头发，对不起我的英语：）

如果您调整窗口的大小 #header中的按钮位于其容器的外部。

这是代码：

#root {
  background: grey;
  
  display: flex;
  flex-direction: column;
  align-items: center;
}

#header {
  background: red;
  
  align-self: stretch; /* fill in main-axis */
  flex: 0 0 65px; /* fixed height */
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  padding: 10px;
}

<div id="root">
  <div id="header">
    <button>PUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUSH</button>
    <button>BYE.</button>
  </div>
  <----- resize me ---->
</div>

我认为问题是＃root.width由window / body.width导致？

我有一个最小含量的解决方案： #root { min-width: min-content; ... } ，但我不想使用此值。

如何正确配置#root作为我的布局的美观容器？

以下是一个用于播放的代码笔：https://codepen.io/papawa/pen/NLKbKR

Answer 1

这完全没有问题，这是合乎逻辑的结果，除非您决定在较小的屏幕上期望得到什么，否则这就是您将得到的，原因是您的按钮带有长的“一个文字”而解决此问题的解决方案只是包装文字本身，这就是您的操作方式：

overflow-wrap: break-word;

或

word-wrap: break-word;

总体结果如下：

 #root {
      display:flex;
      flex-direction: column;
      align-items:center;
      background:grey;
      overflow:hidden;

    }

    #header {
      align-self:stretch;
      flex: 0 0 65px;
      
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      background: red;
      padding: 10px;
}
.btn{
  width: 50vw;
  
  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

<div id="root">
  <div id="header">
    <button class="btn">PUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUSH</button>
    <button>BYE.</button>
  </div>
  <---- resize me ---->
</div>

进一步阅读：Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc)

flexbox之外的按钮

1 个答案: