javascript - 如果元素不适合 flex 布局，如何隐藏它？

Question

我正在尝试制作一个包含 3 个元素的水平 flexbox div。每个都有一个最小宽度，我想隐藏它们，因为屏幕太小而无法容纳它们。如果我知道所有 3 个 div 的宽度，我将只使用媒体查询将 div 隐藏在正确的断点处。问题是 div1 是一个具有动态宽度的图像(在示例中以随机宽度重新创建)

如果一个元素不适合 flexbox 容器，有没有办法隐藏它？

这有点难以解释，但希望运行此代码片段几次将显示我所追求的:

let width = (Math.random()*600)
document.getElementById('one').style.minWidth = width + 'px'

.root {
  display: flex;
  justify-content: space-between;
}

.one {
  background-color: red;
}

.two {
  min-width: 200px;
  background-color: green;
}

.three {
  min-width: 300px;
  background-color: yellow;
  flex: 1
}

<div class="root">
  <div id="one" class="one">
    unknown width
  </div>
  <div class="two">
    hide me if im off the screen
  </div>
  <div class="three">
    hide me if im off the screen
  </div>
</div>

Answer 1

由于您有一个固定高度的图像，您可以将 root 设置为最大高度并使用 flex-wrap: wrap。

let width = (Math.random()*600)
document.getElementById('one').style.minWidth = width + 'px'

.root {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow:hidden;
  max-height:50px;
  overflow-y:hidden;
}

.one {
  background-color: red;
  height: 50px;
}

.two {
  min-width: 200px;
  background-color: green;
}

.three {
  min-width: 300px;
  background-color: yellow;
  flex: 1
}

<div class="root">
  <div id="one" class="one">
    unknown width
  </div>
  <div class="two">
    hide me if im off the screen
  </div>
  <div class="three">
    hide me if im off the screen
  </div>
</div>

http://jsfiddle.net/4y39h8jn/1/