如何继承最小宽度和最大宽度的宽度？

Question

How to inherit the width of the parent with min-width and/or max-width ?

The child element #main_header must have the same width as the parent element #main

I have added #main_inner as an intermediate/helper element.

jsfiddle

https://jsfiddle.net/p010bx5w/4/

 #main { position:relative; min-width:200px; max-width:300px; background:blue; height:350px; } #main_inner { width:100%; background:red; height:300px; } #main_header { position:fixed; width:inherit; background:yellow } 

 <div id="main"> <div id="main_inner"> <div id="main_header"> hey <div style="text-align:right">right</div> </div> </div> </div> 

Answer 1

The simple answer to the title "How to inherit width of min-width and max-width?" is:

min-width: inherit;
max-width: inherit;

Since there is also a helper container in the middle, you'll have to set it on that as well, and add width: 100%; to the child, it seems to be working well.

 #main { position: relative; min-width: 200px; max-width: 300px; background: red; } #main_inner { min-width: inherit; max-width: inherit; width: 100%; height: 300px; background: yellow; } #main_header { min-width: inherit; max-width: inherit; width: 100%; position: fixed; background: blue; } 

 <div id="main"> <div id="main_inner"> <div id="main_header">hey</div> </div> </div> 

EDIT

Added a jQuery approach below:

$(window).on('resize', function() {
  $('#main_header').css('width', $('#main').width());
}).trigger('resize');

 $(window).on('resize', function() { $('#main_header').css('width', $('#main').width()); }).trigger('resize'); 

 #main { position: relative; min-width: 200px; max-width: 300px; background: red; } #main_inner { width: 100%; height: 300px; background: yellow; } #main_header { position: fixed; background: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="main"> <div id="main_inner"> <div id="main_header"> hey <div style="text-align:right">right</div> </div> </div> </div> 

Answer 2

The issue with your code is that you're assuming min-width and max-width rules automatically effect Width for child elements itself. Simply set the min-width rules to inherit and you're good to go

#main_header {
  position:fixed;
  min-width:inherit;
  background:blue
}

In response to your edit: Having a child element that is exactly the same width as its parent is as simple as setting the child to 100% width

#main_header {
  position:fixed;
  min-width:inherit;
  max-width:inherit;
  width:100%;
  background:blue
}