停止弯曲儿童缠绕

Question

我有一个弹性容器，其中的子容器正在包装，我希望它们都保持 100% 的宽度 - 我该怎么做？

.flexbox {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.container {
  display: flex;
  flex-shrink: 0;
  display: block;
}

<div class="flexbox">
  <div class="container">sadasd</div>
  <div class="container">adasdsad</div>
</div>

https://jsfiddle.net/shx2yheg/

Answer 1

您只需要设置flex: 0 0 100%flex 子元素和初始值，这样您就不必更改它flex-wrap。nowrap

.flexbox {
  display: flex;
  align-items: center;
  width: 200px;
  border: 2px solid red;
}

.container {
  flex: 0 0 100%;
  border: blue 1px solid;
}

<div class="flexbox">
  <div class="container">sadasd</div>
  <div class="container">adasdsad</div>
</div>