Question 196702 in Html Question posted in
Some basic documentation can be found here.

Html – Filling space horizontally inside container

I have a container that contains two elements: a search bar, and a table under it. Inside the table, I have a sidebar to the left and some content to the right. The container has fixed height, and I want the sidebar and content to fill the space vertically.

I can get the table to fill the space, but not the sidebar and the content. This is the closest I can get:

* {
  font-family: "Poppins", sans-serif;
}

body {
  background-size: 100%;
  /*background-image: url('./images/diego-ph-5LOhydOtTKU-unsplash.jpg');*/
  background-color: black;
  background-repeat: "no-repeat";
  background-position: 0 0;
  color: aliceblue;
  margin: 0;
  padding: 0;
}

.projects-table {
  border-style: solid;
  border-radius: 1rem;
  border-width: 0.25rem;
  border-color: slategrey;
  margin-top: 5rem;
  padding: 1rem;
  height: 20rem;
  display: flex;
  flex-direction: column;
}

.projects-table .search {
  opacity: 0.25;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  border-bottom: solid;
  border-width: 0.1rem;
}

.projects-table .search img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
}

.projects-table .projects-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 1rem;
  flex-grow: 1;
  border-style: solid;
}

.projects-table .projects-content .sidebar {
  width: 10%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-style: solid;
  margin: 0.5rem;
}

.projects-table .projects-content .sidebar p {
  border-style: solid;
  border-width: 0.1rem;
  border-radius: 0.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding: 1rem;
}

.projects-table .projects-content .content {
  width: 100%;
  height: 100%;
  margin: 0.5rem 1rem 0.5rem 1rem;
  border-style: solid;
  border-width: 0.1rem;
  border-radius: 0.5rem;
  padding: 1rem;
}
 <div class="projects-table">
      <div class="search">
        <h3>Search...</h3>
      </div>
      <div class="projects-content">
        <div class="sidebar">
          <p>Sidebar</p>
          <p>Sidebar</p>
        </div>
        <p class="content">content</p>
      </div>
    </div>
Tags:

3

Answers


  1. 0

    You can try to set flexbox align-items:stretch and flex-grow:1 properties:

    .projects-table .projects-content {
  align-items: stretch;
}
.projects-table .projects-content .content {
  flex-grow: 1;
}
    Login or Signup to reply.
  2. 0

    All you need to do is to give the content items a flex-grow: 1

    .projects-table .projects-content .sidebar p {
  flex-grow: 1;
  ...
}

    * {
  font-family: "Poppins", sans-serif;
}

body {
  background-size: 100%;
  /*background-image: url('./images/diego-ph-5LOhydOtTKU-unsplash.jpg');*/
  background-color: black;
  background-repeat: "no-repeat";
  background-position: 0 0;
  color: aliceblue;
  margin: 0;
  padding: 0;
}

.projects-table {
  border-style: solid;
  border-radius: 1rem;
  border-width: 0.25rem;
  border-color: slategrey;
  margin-top: 5rem;
  padding: 1rem;
  height: 20rem;
  display: flex;
  flex-direction: column;
}

.projects-table .search {
  opacity: 0.25;
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  border-bottom: solid;
  border-width: 0.1rem;
}

.projects-table .search img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
}

.projects-table .projects-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 1rem;
  flex-grow: 1;
  border-style: solid;
}

.projects-table .projects-content .sidebar {
  width: 10%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-style: solid;
  margin: 0.5rem;
}

.projects-table .projects-content .sidebar p {
  flex-grow: 1;
  border-style: solid;
  border-width: 0.1rem;
  border-radius: 0.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding: 1rem;
}

.projects-table .projects-content .content {
  width: 100%;
  height: 100%;
  margin: 0.5rem 1rem 0.5rem 1rem;
  border-style: solid;
  border-width: 0.1rem;
  border-radius: 0.5rem;
  padding: 1rem;
}
    <div class="projects-table">
      <div class="search">
        <h3>Search...</h3>
      </div>
      <div class="projects-content">
        <div class="sidebar">
          <p>Sidebar</p>
          <p>Sidebar</p>
        </div>
        <p class="content">content</p>
      </div>
    </div>
    Login or Signup to reply.
  3. 0

    Here is a bit of an alternate way to do what you are doing. I find using something like this makes long-term maintenance easier and individual "block" styling easier to understand without complex positioning.

    I find that using a grid with grids IN it makes complex layout easier. Note here I used some grid-areas names just to make things clear what was where; some ugly styling just to show what is where etc.

    • using a grid for the "page" to account for that prior large 5em margin that MGIHT be for some content? avoids some weird fix positioning and sizing challenges if so
    • adding some div wrappers for "containers"
    • used "container" to help describe layout vs visual styles for each container block
    * {
  font-family: "Poppins", sans-serif;
}

body {
  background-color: #000000;
  color: aliceblue;
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
}

.page-container {
  background-color: #404040;
  display: grid;
  grid-template-columns: 1fr;
  /* the 5em nothingyet is the prior 5em margin but allows content to be in that row if needed */
  grid-template-rows: 5em auto;
  grid-template-areas: 
  "nothingyet" 
  "projectthings";
}

.project-container {
  grid-area: projectthings;
  background-color: #004020;
  /* tell the this container to be that auto row */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 5em auto;
  grid-template-areas: 
  "searchc"
  "contentc";
  height: 20rem;
}

.search-container {
  grid-area: searchc;
  display: grid;
  grid-template-rows: afr;
  grid-template-columns: 1.25em auto;
  /* this 0.25em was padding before but really is a "gap" between image and h1 */
  grid-gap: 0.25em;
  grid-template-areas: "imgc searchy";
  align-items: center;
  border-bottom: solid;
  border-width: 0.1rem;
  border-color: #7FFF00;
  opacity: 0.25;
  color: white;
}

.content-contaIner {
  grid-area: contentc;
  background-color: #FF0080;
  display: grid;
  grid-template-columns: 10% auto;
  grid-template-rows: 20em;
  grid-template-areas: "sidebar content";
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.image-container {
  grid-area: imgc;
  height: 1.25em;
}

.search-search {
  grid-area: searchy;
}

/* below here is just the styling from before mostly - see inline comments */
.projects-table {
  border-style: solid;
  border-radius: 1rem;
  border-width: 0.25rem;
  border-color: slategrey;
}

/* moved to the search-container grid definition
.projects-table .search img {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.25rem;
}
*/

.projects-table .search .image-container img {
/* depends on image and use intent really */
  height: 100%;
  width: 100%;
  border: solid yellow 3px;
}

.projects-table .projects-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 1rem;
  flex-grow: 1;
  border-style: solid;
}

.projects-table .projects-content .sidebar {
  /* moved to content-container css
  width: 10%;
  height: 100%;
  */
  display: flex;
  flex-direction: column;
  align-items: center;
  border-style: solid;
  margin: 0.5rem;
}

.projects-table .projects-content .sidebar p {
  border-style: solid;
  border-width: 0.1rem;
  border-radius: 0.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding: 1rem;
}

.projects-table .projects-content .content {
  /* moved to content-container css as auto
  width: 100%;
  height: 100%;
  */
  margin: 0.5rem 1rem 0.5rem 1rem;
  border-style: solid;
  border-width: 0.1rem;
  border-radius: 0.5rem;
  padding: 1rem;
}
/* can be whatever but just to show it is contained in the container block allocated to it */
.content{width:100%;}
    <div class="page-container">
  <div class="projects-table project-container">
    <div class="search search-container">
      <div class="image-container">
        <!-- might not seem to line up but the alt text IMG is bigger than the 1.25em -->
        <img src="" alt="IMG">
      </div>
      <div class="search-search">
        <h3>Search...</h3>
      </div>
    </div>
    <div class="projects-content content-container">
      <div class="sidebar">
        <p>Sidebar</p>
        <p>Sidebar</p>
      </div>
      <p class="content">content</p>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search