将固定宽度设置为父级的 100% 高度

Question

In the following HTML, I want to set the height of left and right 100% of the parent element. In addition, the left div has fixed width. The right should use all of the remaining width.

I think because of using display: flex; in the parents div, the width of the left div doesn't stay constant. How can I set fixed width for it and allocate all of the remaining space to the right.

Edit: the calc(100-52px) is the height of the parent . The question is only about setting fixed width of 100px to the left so that it doesn't change on resizing the window.

Here's what I'm trying:

 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: column; }

Answer 2

You can use width: calc(100% - 100px) or flex: 1 for the right div.

Percentage values are calculated from the parent element, therefore you need to extract static values from 100% to get the remaining area.

But as you are already using a flex container here, you can just set flex: 1, which is the shorthand for flex-grow: 1, that will allow your container to take all the extra space in the parent container, since no other items are available.

Answer 3

Add a flex declaration to the .left selector:

flex: 0 0 100px;

flex syntax:

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

So this declaration is stating: "don't grow, don't shrink, define the initial size as 100px"

Read more: flex (MDN)

Answer 4

If right is to stand 52px away from the far right, then a margin will do. Please clarify your question.

 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

Set flex: 0 0 100px; on your .left div (you can remove width: 100px ) if you want it to be a constant 100px - so no growing or shrinking.

 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

see if this helps you, comment if you need any changes

stackblits link for 1 fixed width, 1 relative column