CODEWITHSUNDEEP
cssflexbox
Jason S
Jason S

Reputation: 189696

How to get a column to take up the rest of the horizontal space in a webpage

I have some elements in a container X which are fixed-width, and I would like to create a column Y using CSS to take up the rest of the width if there is at least some min-width available, or move it below container X otherwise.

I've tried to use flexbox, but don't really understand it, and the example below pushes the div.description down below div.interactive if the text doesn't fit... I just want it to be pushed down if the available width isn't 200px or more.

How can I do this with flexbox?

<!DOCTYPE html>
<html>
<head>
<title>Position demo</title>
<style type='text/css'>
	@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
	body {
		font-family: 'Open Sans', sans-serif;
	}
	canvas {
		border: 1px solid black;
	}
	div.all {
	  display: flex;
	  flex-flow: row wrap;
	}
	div.interactive {
		border: 1px solid red;
        flex-grow: 0;
	}
	div.description {
    	flex-grow: 2;
        min-width: 200px;
		vertical-align: top;
		border: 1px solid green;
		margin-left: 5px;
		padding: 2px;
	}
	div.canvas_holder {
		display: inline-block;
		position: relative;
		height: 300;
	}
	div.canvas_title {
		z-index: 1;
		position: absolute;
		left: 5px;
		top: 5px;
	}

</style>
</head>
<body>
	<div class="all">
    <div class="interactive column">
	<div>
		<div class="canvas_holder canvas_wide">
		<canvas id="canvas1" height="300" width="300" ></canvas>
		<div class="canvas_title"> canvas 1 </div>
		</div>

		<div class="canvas_holder canvas_wide">
		<canvas id="canvas2" height="300" width="300" ></canvas>
		<div class="canvas_title"> canvas 2 </div>
		</div>
	</div>
	
	<div class="panel1">
	stuff goes here
	</div>
	</div> <!-- end of class=interactive -->
	
	<div class="description column">
	<p>Blah!</p>
	<p>asdfoijsafdoija asdfopsd fasdfo oopso bingo bango</p>
	</div> <!-- end of class-description -->

	</div> <!-- end of class=all -->
</body>
</html>

A longer example, trying to use Temani Afif's approach

<!DOCTYPE html>
<html>
<head>
<title>Position demo</title>
<style type='text/css'>
	@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
	body {
		font-family: 'Open Sans', sans-serif;
	}
	canvas {
		border: 1px solid black;
	}
	div.all {
	  display: flex;
	  flex-flow: row wrap;
	}
	div.interactive {
		border: 1px solid red;
        flex-grow: 0;
	}
	div.description {
    	flex-grow: 2;
        flex-basis: 250px;
		vertical-align: top;
		border: 1px solid green;
		margin-left: 5px;
		padding: 2px;
	}
	div.canvas_holder {
		display: inline-block;
		position: relative;
		height: 300;
	}
	div.canvas_title {
		z-index: 1;
		position: absolute;
		left: 5px;
		top: 5px;
	}

</style>
</head>
<body>
	<div class="all">
    <div class="interactive column">
	<div>
		<div class="canvas_holder canvas_wide">
		<canvas id="canvas1" height="300" width="300" ></canvas>
		<div class="canvas_title"> canvas 1 </div>
		</div>

		<div class="canvas_holder canvas_wide">
		<canvas id="canvas2" height="300" width="300" ></canvas>
		<div class="canvas_title"> canvas 2 </div>
		</div>
	</div>
	
	<div class="panel1">
	stuff goes here
	</div>
	</div> <!-- end of class=interactive -->
	
	<div class="description column">
	<p>Blah!</p>
	<p>asdfoijsafdoija asdfopsd fasdfo oopso bingo bango.
    Twas brillig, and the slithy toves did gyre and gimble in the wabe.
    All mimsy were the borogoves and the momeraths outgrabe.
    </p>
	</div> <!-- end of class-description -->

	</div> <!-- end of class=all -->
</body>
</html>

Upvotes: 1

Views: 42

Answers (1)

Temani Afif
Temani Afif

Reputation: 273022

You need to set flex-basis:0 to achieve what you want:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
body {
  font-family: 'Open Sans', sans-serif;
}

canvas {
  border: 1px solid black;
}

div.all {
  display: flex;
  flex-flow: row wrap;
}

div.interactive {
  border: 1px solid red;
  flex-grow: 0;
}

div.description {
  flex-grow: 2;
  flex-basis: 0;
  min-width: 200px;
  vertical-align: top;
  border: 1px solid green;
  margin-left: 5px;
  padding: 2px;
}

div.canvas_holder {
  display: inline-block;
  position: relative;
  height: 300;
}

div.canvas_title {
  z-index: 1;
  position: absolute;
  left: 5px;
  top: 5px;
}
<div class="all">
  <div class="interactive column">
    <div>
      <div class="canvas_holder canvas_wide">
        <canvas id="canvas1" height="300" width="300"></canvas>
        <div class="canvas_title"> canvas 1 </div>
      </div>

      <div class="canvas_holder canvas_wide">
        <canvas id="canvas2" height="300" width="300"></canvas>
        <div class="canvas_title"> canvas 2 </div>
      </div>
    </div>

    <div class="panel1">
      stuff goes here
    </div>
  </div>
  <!-- end of class=interactive -->

  <div class="description column">
    <p>Blah!</p>
    <p>asdfoijsafdoija asdfopsd fasdfo oopso bingo bango</p>
  </div>
  <!-- end of class-description -->

</div>
<!-- end of class=all -->

Or use 200px inside flex-basis

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);
body {
  font-family: 'Open Sans', sans-serif;
}

canvas {
  border: 1px solid black;
}

div.all {
  display: flex;
  flex-flow: row wrap;
}

div.interactive {
  border: 1px solid red;
  flex-grow: 0;
}

div.description {
  flex-grow: 2;
  flex-basis: 200px;
  min-width: 0;
  vertical-align: top;
  border: 1px solid green;
  margin-left: 5px;
  padding: 2px;
}

div.canvas_holder {
  display: inline-block;
  position: relative;
  height: 300;
}

div.canvas_title {
  z-index: 1;
  position: absolute;
  left: 5px;
  top: 5px;
}
<div class="all">
  <div class="interactive column">
    <div>
      <div class="canvas_holder canvas_wide">
        <canvas id="canvas1" height="300" width="300"></canvas>
        <div class="canvas_title"> canvas 1 </div>
      </div>

      <div class="canvas_holder canvas_wide">
        <canvas id="canvas2" height="300" width="300"></canvas>
        <div class="canvas_title"> canvas 2 </div>
      </div>
    </div>

    <div class="panel1">
      stuff goes here
    </div>
  </div>
  <!-- end of class=interactive -->

  <div class="description column">
    <p>Blah!</p>
    <p>asdfoijsafdoija asdfopsd fasdfo oopso bingo bango</p>
  </div>
  <!-- end of class-description -->

</div>
<!-- end of class=all -->

Upvotes: 1

Related Questions