弹性框防止溢出并保持右项目固定宽度和左项目收缩

debugcn 发表于 Dev

强尼Q

使用该flex-basis属性保持左侧项目具有固定宽度没有问题。但我有一个场景，我不希望左侧元素被固定，而是保持右侧元素的宽度固定。我尝试放置flex-basis正确的元素，但是问题是 flex 项目溢出了它的容器。

有没有办法实现这一目标？例如我有下面的布局：

.flex-outer {
  display: flex;
}

.dashboard {
  flex-grow: 1;
}
.col {
  margin-left: 25px;
  flex-basis: 200px;
  background: orange;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px;
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

问题

我想要做的是将正确的元素（橙色）保持200px在固定的宽度，并根据可用空间缩小左侧的 flex-item（红色）。但是，问题是当视口太窄时，正确的元素会溢出容器，请参见下图。

一个儿子

作为flex-shrink默认1，则意味着.col被允许收缩低于给定的200px。

添加flex-shrink: 0到.col规则，它不会。

堆栈片段

.flex-outer {
  display: flex;
}

.dashboard {
  flex-grow: 1;
}
.col {
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px;
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

如果您还想完全避免将orange框从视图中推出，并且min-width默认为auto，这意味着 thedashboard和 theflex-container不会比它们的内容小，您还需要将min-width: 0它们都设置为它们。

堆栈片段

.flex-outer {
  display: flex;
}

.dashboard {
  flex-grow: 1;
  min-width: 0;                         /*  added  */
}
.col {
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px;
  min-width: 0;                         /*  added  */
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

处理左侧项目的第二个选项当然是设置flex-wrap: wrap为flex-container

堆栈片段

.flex-outer {
  display: flex;
}

.dashboard {
  flex-grow: 1;
}
.col {
  margin-left: 25px;
  flex-basis: 200px;
  flex-shrink: 0;                       /*  added  */
  background: orange;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;                      /*  added  */
  justify-content: space-around;
}
.flex-item {
  flex: 1 1 200px;
  max-width: 200px;                     /*  added, to keep them max 200px  */
  background: tomato;
  padding: 5px;
  height: 150px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="flex-outer">
  <div class="dashboard">
    <ul class="flex-container">
      <li class="flex-item">1</li>
      <li class="flex-item">2</li>
      <li class="flex-item">3</li>
      <li class="flex-item">4</li>
      <li class="flex-item">5</li>
      <li class="flex-item">6</li>
    </ul>
  </div>

  <div class="col">

  </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-13

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

弹性框防止溢出并保持右项目固定宽度和左项目收缩

弹性框防止溢出并保持右项目固定宽度和左项目收缩

问题

弹性框文字项目溢出

弹性框文字项目溢出

如何防止弹性项目收缩小于其内容？

如何防止弹性项目的高度因其内容而溢出

固定位置元素继承弹性项目的宽度

多行文字溢出，包含不可缩小的项目（弹性框）

弹性框项目的宽度缩小到文本

CSS左柱流体和右柱固定宽度

弹性项目不会随着弹性增长而扩展或收缩

忽略宽度的弹性项目

防止 flex box 项目在包装后收缩

增加弹性列的高度，但保持宽度固定

增加弹性列的高度，但保持宽度固定

保持弹性项目的长宽比

保持弹性项目的长宽比

IE11 弹性项目垂直溢出

导航菜单项目弹性宽度

弹性项目覆盖最大宽度属性

CSS Flexbox：3个弹性项目，2列（宽度等于内容）和1个宽度增加的项目

尽管具有溢出属性，但内容溢出的弹性项目

jQuery展开和收缩侧栏，保持窗口宽度尺寸

通过固定宽度的下拉菜单防止内容溢出

使弹性项目具有100％的高度并溢出：滚动

为什么空格会使弹性项目在左侧溢出？

弹性项目溢出容器时更改正当内容值

溢出：滚动不适用于弹性项目

响应式网格中的固定宽度项目？

如何使 flex 项目以固定宽度包裹

防止ListBox中的项目超过其宽度