6

Subj.

I have two divs (left and right). And I want to make left div something like main one, and force right div to have the same height as a left one, even if it will have more content (and do overflow: hidden). I will appreciate if there is a way to make it with css and html without js.

Here is a little snippet, how my markup is looking:

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.children-1 {
  width: 66.6%;
  background: green;
}

.children-2 {
  width: 33.4%;
  background: yellow;
}
<div class="parent">
  <div class="children-1">
    <p>My content</p>
  </div>
  
  <div class="children-2">
    <p>a lot of content<p>
    <p>a lot of content</p>
  </div>
</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
Andrey Drozdov
  • 571
  • 1
  • 5
  • 22

2 Answers2

4

Apply a fixed height to the container and use overflow-y: hidden; on the second child DIV:

.parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 200px;
}

.children-1 {
  width: 66.6%;
  background: green;
}

.children-2 {
  width: 33.4%;
  background: yellow;
  overflow-y: hidden;
}
<div class="parent">
  <div class="children-1">
    <p>My content</p>
  </div>
  
  <div class="children-2">
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
  </div>
</div>

Here's a second version without fixed height, but the HTML structure is changed: There is only one child (the right one), and the contents which were in the first child are now in the parent. It uses absolute positioning for that child element and hides the overflow of the child element - see the actual settings below:

html,
body {
  margin: 0;
}

.parent {
  position: relative;
  padding: 1em;
  background: green;
  overflow-y: hidden;
}

.children-2 {
  width: 33.4%;
  position: absolute;
  right: 0;
  top: 0;
  background: yellow;
}
<div class="parent">
  <p>My content</p>
  <p>My content</p>

  <div class="children-2">
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
    <p>a lot of content</p>
  </div>

</div>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I there is a way to do this without fixed height size? (since I have dynamic content in both divs) – Andrey Drozdov Dec 04 '17 at 23:14
  • Just to emphasize: In my second solution, the height is dynamic and adjusts to the contents of the parent DIV (i.e. the contents of your original first div) – Johannes Dec 04 '17 at 23:58
-1

Yes of course! Just use CSS grid!!

.parent {
  display: grid;
  grid-template-columns: 2fr 1fr;
}
.children-1 {
  background: green;
}
.children-2 {
  background: yellow;
  overflow-y: hidden;
  max-height: 200px; // Limit the height 
}

https://codepen.io/Konrad001/pen/MOxzEe

Konrad Albrecht
  • 1,701
  • 1
  • 9
  • 20
  • And this will work with dynamic height? Or I still will need to add JS to limit height of the `children-2` element? – Andrey Drozdov Dec 04 '17 at 23:42
  • @AndreyDrozdov Yes, with maximum height set it will work "up to" scenario. If there is less content than set boundary the entire row will collapse to fit the content. – Konrad Albrecht Dec 05 '17 at 21:43