html - 他的 flexbox 外的按钮

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 is leaded by window/body.width ?

我有一个最小内容的解决方案:#root { 最小宽度:最小内容； ... }，但我不想使用这个值。

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

这是一个用于播放的codepen: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)