使用父级的100％高度设置固定宽度

Question

在以下HTML中，我想将left元素的right和parent的高度设置为100％。另外，left div具有固定的宽度。 right应该使用所有剩余宽度。

我认为由于在父div中使用display: flex;，所以left div的宽度不会保持恒定。我该如何为其设置固定宽度并在右侧分配所有剩余空间。

编辑：calc(100-52px)是parent的高度。问题仅在于将左侧的固定宽度设置为100px，以便在调整窗口大小时不会改变。

这就是我要尝试的：

body {
  padding: 0;
  margin: 0;
}

.parent {
  background: red;
  display: flex;
  height: calc(100vh - 52px);
  
}

.left {
  width: 100px;
  background: yellow;      
  
}

.right {    
  background: orange;
  width: 100%;  
  
}

<div class="parent">
 
     <div class="left">the width should be fixed, not flexible</div>  
     <div class="right">width should be all of the remaining</div>
  
</div>

Answer 1

parent {display：-webkit-box; display：-webkit-flex; display：-ms-flexbox; display：flex; flex-wrap：wrap; }

.parent> [class * ='col-'] {display：flex; flex-direction：列; }

Answer 2

您可以将width: calc(100% - 100px)或flex: 1用作右格。

百分比值是从父元素计算得出的，因此您需要从100％提取静态值以获取剩余面积。

但是，由于您已经在这里使用flex容器，因此您可以设置flex：1，这是flex-grow：1，的简写，它将允许您的容器占用父容器中的所有额外空间，因为没有其他可用的物品。

Answer 3

向flex选择器添加.left声明：

flex: 0 0 100px;

flex 语法：

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

因此，此声明说明：“不要增长，不要收缩，将初始大小定义为100px”

了解更多：flex（MDN）

Answer 4

如果右边距最右边52px，那么边距就可以了。请澄清您的问题。

body {
  padding: 0;
  margin: 0;
}

.parent {
  background: red;
  display: flex;
  height: calc(100vh - 52px);
}

.left {
  width: 100px;
  background: yellow;
}

.right {
  flex-grow: 1;
  background: orange;
  margin-right: 52px;
}

<div class="parent">

  <div class="left">the width should be fixed, not flexible</div>
  <div class="right">width should be all of the remaining</div>

</div>

Answer 5

如果希望{100}保持不变，请在flex: 0 0 100px; div上设置.left（可以删除width: 100px），这样就不会增大或缩小。

body {
  padding: 0;
  margin: 0;
}

.parent {
  background: red;
  display: flex;
  height: calc(100vh - 52px);
  
}

.left {
  flex: 0 0 100px;
  background: yellow;      
  
}

.right {    
  background: orange;
  width: 100%;  
  
}

<div class="parent">
 
     <div class="left">the width should be fixed, not flexible</div>  
     <div class="right">width should be all of the remaining</div>
  
</div>

Answer 6

看看这是否对您有帮助，请注释是否需要任何更改

stackblits link for 1 fixed width, 1 relative column