Question

我需要连续创建三列，其中右边的项目具有min-width: 300px，中间的项目具有595px的固定宽度。左边的项目必须使用其余的宽度！我尝试使用flexbox和table单元格，但左侧容器似乎超出了屏幕宽度，这导致出现底部滚动条，在这种情况下不希望这样做。

<div class="row">
   <div class="column left">
   </div>
   <div class="column middle">
   </div>
   <div class="column right">
   </div>
</div>

.row {
  width: 100%;
  & .column {
    &.left {
    }
    &.middle {
      width: 595px !important;
    }
    &.right {
      min-width: 300px;
    }
  }
}

Answer 1

根据您的要求，当屏幕宽度小于895px时，您将获得一个水平滚动条。这就是您的width: 595px和min-width: 300px容器的长度。

.row {
  display: flex;
  height: 100px;
}

.left {
  flex: 1;   /* consume remaining space */
  background-color: aqua;
}

.middle {
  flex: 0 0 595px;  /* equivalent to width: 595px; flex-grow, flex-shrink, flex-basis */
  background-color: orange;
}

.right {
  min-width: 300px;
  background-color: lightgreen;
}

<div class="row">
  <div class="column left"><code>flex: 1</code></div>
  <div class="column middle"><code>width: 595px</code></div>
  <div class="column right"><code>min-width: 300px</code></div>
</div>

具有3列固定和灵活宽度的行

1 个答案:

jsFiddle demo