CODEWITHSUNDEEP
htmlcsssassflexbox
Pushpendra Yadav
Pushpendra Yadav

Reputation: 219

CSS Flex: Two columns with fixed width and remaining two columns with relative wdith

I have a four column table, I want columns 3 and 4 to have a fixed width of 200 px and col1 and col2 to share 50% each of the remaining width.

I am trying something like this, but not getting the desired results. Can someone help?

https://codesandbox.io/s/currying-architecture-lw1t6?file=/src/styles.css

Upvotes: 0

Views: 261

Answers (3)

s.kuznetsov
s.kuznetsov

Reputation: 15213

This will help you.

.col3, .col4 {
    min-width: 200px;
}

this is a revision ( and rule max-width has no auto parameter ):

.col1,
.col2 {
  width: 50%;
  max-width: 0;
}

.col3,
.col4 {
  min-width: 120px;
  max-width: 200px;
}

Upvotes: 1

NITISH KUMAR
NITISH KUMAR

Reputation: 19

set min-width:200px; ,max-width:auto; for which you want to set fixed 200px size and for other column you can give set width in percentage. You can inspect and play around the code.

Upvotes: 0

rakeysharyal
rakeysharyal

Reputation: 96

You need to use max-width CSS property in that particular box in which you want to apply the fixed size.

<!DOCTYPE html>
<html>
<head>
    <title>FLEX</title>
    <style type="text/css">
 body{
 font-size: 20px;
 }
 h1{
 font-size: 24px;
 text-transform: uppercase;
 text-align: center;
 }
 .parent{
 display: flex;
 
 text-align: center;
 }
 .parent > * {
 padding: 20px;
 flex: 1 100%;
  }
 .child-1{
    max-width: 200px; //max width
 background: blue;
 }
 .child-2{
 background: green;
 max-width: 200px;  //max width
 }
 .child-3{
 background: yellow;
 }
 .child-4{
 background: pink;
 }


 }

 }
 </style>
</head>
<body>
<h1>FLex box with 2 fixed box</h1>
 <div class="parent">
 <div class="child child-1"><strong>Child 2</strong><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
 </div>
 <div class="child child-2">Child 3 <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</div>

 <div class="child child-3"><strong>Child 4</strong><br> Lorem ipsum
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
 <div class="child child-4">Child 5 <br> Lorem ipsum
 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>

 </div>
</body>
</html>

Upvotes: 0

Related Questions